Недавно мы обнаружили плагин jQuery, который позволяет легко создать эффект набора текста на веб-сайте. Этот плагин называется typed.js, у него открытый исходный код, и его можно скачать с Github. В этом уроке мы расскажем подробней об этом плагине, а также покажем, как создать эффект набора текста с помощью только анимаций CSS.

Установка этого плагина очень проста, все, что надо сделать, — подключить плагин в приложение и использовать следующий код:

<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...
<div class="element"></div>

Когда веб-страница загрузится, сначала начнет печататься первое предложение, а после него — второе. Можно задавать скорость печати, передавая продолжительность анимации в миллисекундах.

Мы создали пример, чтобы показать, как выглядит этот эффект.

Демонстрация работы Typed.js

Если Вам понадобится создать такой эффект, можете скачать проект typed.js с Github.

Проект Typed.js

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

Плагин typed.js — легкий и интересный плагин jQuery, но это все же плагин jQuery, так что, чтобы им воспользоваться, его нужно подключить в приложение, что потребует больше ресурсов и увеличит количество запросов HTTP к странице. Это было бы не особо важно, если бы это был единственный способ создать такой эффект, но эффект набора текста можно создать, используя только CSS.

Анимация CSS позволяет создать временную функцию анимации, которая укажет анимации, как ей развиваться до конца. Одна из временных функций, steps() (шаги), позволяет задавать количество кадров, которые будет использовать анимация, это отключит привычную плавную анимацию и создаст более блочную, как раз то, что надо для набора текста.

Используя функцию steps(), можно создать анимацию, которая будет только увеличивать размер элемента от 0 до конца абзаца.

Для начала создадим абзац, которому хотим задать эффект набора текста:

<p class="css-typing">This is a paragraph that is being typed by CSS animation.</p> 

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

.css-typing
{
    width: 30em;
    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; }
}

Анимация будет увеличивать размер абзаца от 0 до 30em за 50 кадров, таким образом создавая эффект набора текста.

Посмотрите пример, чтобы увидеть, как это работает.

Демонстрация работы временной функции CSS steps

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

• Создание выдвигающейся формы поиска
• Использование псевдокласса CSS3 :target
• Создание нескольких рамок с использованием CSS3