Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Эффект печатающегося текста с помощью CSS3

Эффект печатающегося текста с помощью CSS3

Существует немало решений для реализации эффекта печатающегося текста с помощью javascript. На jQuery например, можно с текстом выписывать такие кренделя, что диву даёшься. Но меня всегда интересует возможность выполнения той или иной задачи с помощью свойств CSS3, конечно только тогда, когда это оправданно и не несёт явных потерь в общей картине конечного результата.
На одном из проектов, мне понадобилось (с легкой руки и по прихоти заказчика) выполнить краткое описание сайта в виде печатающегося текста появляющегося под логотипом вовремя загрузки. Как-то не очень-то хотелось из-за одной строки, подключать в работу дополнительный плагин. Долго искать оптимального решения не пришлось, с помощью CSS-анимации можно создать вполне привлекательную иллюзию печатающегося текста.
Конечно, с использованием специальных jQuery-плагинов, Typed.js например, возможностей больше, в плане настроек и регулирования различных параметров эффекта. Но для простенького печатающегося текста, вполне можно обойтись исключительно средствами CSS, достаточно лишь несколько строк кода и ваш оживет.

Использование CSS анимации

Прежде чем приступить к разбору и описанию свойств CSS, хочу предупредить, что эффект отлично работает в современных браузерах, Firefox, Chrome, Opera и даже IE начиная с 10-й версии справляется с анимацией CSS. Для версий IE9 и ранних, лучше использовать механизмы javascript.

В CSS-анимации есть замечательная функция animation-timing-function, свойство которое описывает метод расчета промежуточных значений свойств при анимации. С помощью одной из фунций этого свойства, а именно steps (), мы сможем определить количество кадров анимации, удалив привычную плавную анимацию и создадим блок анимации, воссоздающий реальный эффект набора текста.
Используя значения функции steps(), мы можем реализовать анимацию, увеличивая размер элементов начиная от 0 и до конца строки(абзаца)

Применим свойство анимации для коротенького абзаца, для этого нужную нам строку текста обернем тегом <p> с определенным классом, например: class="text-typing", в итоге получит следующую конструкцию в html:

<p class="text-typing">Простой пример создания печатающегося текста с помощью CSS3-анимации....</p>

Теперь, непосредственно в css определим все необходимые свойства для этого класса. Выставим нужную нам ширину абзаца, размер, цвет и начертание шрифта, добавим свойство overflow:hidden;, тем самым с помощью связки со значением 0 в @keyframes скроем текст до включения анимации в работу. И наконец определим нужные нам значения анимации в временной функции steps ()

Значения CSS для примера:

.text-typing
{
    width: 40em;
    color:green;
    font-size: 22px;
    font-family: 'Marck Script', cursive;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}
@keyframes type{
    from { width: 0; }
}
 
@-webkit-keyframes type{
    from { width: 0; }
}

Всё! Эффект печатающегося текста готов. Срабатывать он будет каждый раз при перезагрузке страницы, нужный вам текст эффектно отпечатается и замрет, выполнив в полной мере задачу, чтобы его непременно заметил пользователь посетивший ваш сайт.
Ссылка на просмотр демо ведет в онлайн-редактор кода, так что при желании можете вволю поэкспериментировать с параметрами. Если обнаружится какая ошибка в коде или косяк в плане отображения, любые поправки и дополнения, обязательно пишите в комментариях.

В работе использовал оригинальный сниппет из коллекции paulund.

С уважением, Андрей.

Всего комментариев: 14

  • Арбарс: 27 июня, 2014 в 14:50

    Здорово… Для какого-нибудь прикола весьма неплохая фишка 🙂

    Ответить
  • SLAWAMONOLIT: 11 ноября, 2014 в 18:54

    Эффект печатающегося текста впечатлил! Спасибо! Добавил Ваш сайт в закладки.

    Ответить
  • Семен Семеныч: 28 ноября, 2014 в 16:25

    Шикарно! Иногда Оч нужная вещь!

    Ответить
  • Дима: 17 августа, 2015 в 10:54

    Как всегда, что-то не работает. Зачем выкладывать код с ошибками. В оригинальной статье все работает, а тут…не дописали код.

    Ответить
    • driver: 17 августа, 2015 в 16:30

      Пиз-ц: «Как всегда, что-то не работает»
      Вот вы сейчас написали, лишь бы что-то написать, или как?. У всех работает, а именно у вас нет. Если вы увидели ошибку, то укажите на неё, а так, это смахивает на банальный «пук в пустоту».
      От оригинала, код отличается только лишь размерами контейнера и шрифта.
      В данный момент, сижу уставившись в окна 4-х открытых браузеров и наблюдаю вполне себе корректную работу эффекта.

      Ответить
  • Владислав: 11 сентября, 2015 в 14:56

    Спасибо всё работает))) но вы в примере (в самой статье) не дописали стили @keyframes. Если не перейди по ссылке animation-timing-function и этого не увидеть, то ни чего не работает ))

    Ответить
    • driver: 11 сентября, 2015 в 15:39

      Владислав, спасибо за поправку.
      Даже и не заметил, что упустил важную деталь)))

      Ответить
  • Макс: 10 октября, 2015 в 02:48

    тут есть 1 огромный недостаток. Текст в несколько строе невозможно сдлать

    Ответить
    • Макс: 10 октября, 2015 в 14:16

      Точнее строк*

      Ответить
  • Айрат: 24 февраля, 2016 в 18:39

    Всё норм работает! Спасибо!

    Ответить
  • Алекс: 14 сентября, 2016 в 19:03

    Скажите, а как доработать этот скрипт, чтобы также текст и стирался.
    Как будто кто-то печатает текст, потом стирает слово, печатает вместо него другое и продолжает печатать дальше?

    Ответить
    • Игорь: 27 сентября, 2017 в 07:48

      В статье автора указан скрипт с такой возможностью. Вот ссылка с примером и скачиванием:

      А тут пример пишущегося письма пером и чернилами:

      Ответить
  • Кирилл: 31 марта, 2018 в 11:29

    Благодарствую за отличный эффект. Весьма пригодился 🙂

    Ответить
  • Elv: 13 мая, 2019 в 11:34

    Здравствуйте. Подскажите что можно сделать чтобы на мобильном отображался весь текст, с переносом наверно. С таким кодом обрезает текст.
    /* Планшет */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
    width: 768px;
    }
    }
    /* Мобильный - Примечание: Дизайн для ширины 320px*/
    @media only screen and (max-width: 767px) {
    .container {
    width: 95%;
    }
    #portfoliolist .portfolio {
    width:48%;
    margin:1%;
    }
    }
    /* Мобильный - Примечание: Дизайн для ширины 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
    width: 70%;
    }
    }
    Спасибо .

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>