Создайте в CSS эффект ввода текста

Дата публикации: 2014-02-06

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

Установить плагин легко: все, что вам понадобится – это включить его в свое приложение и применить следующий код.

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

<div class="element"></div>

$(function(){

$(".element").typed({

strings: ["First sentence.", "Second sentence."],

typeSpeed: 0

});

</script>

...

При загрузке страницы он начнет печатать первое предложение, а затем – второе. Можно отрегулировать скорость ввода текста, передав количество миллисекунд до завершения анимации.

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

Демо-страница Typed.js

Если хотите применять его в своих проектах, можете скачать проект typed.js с github.

Проект Typed.js

Применение анимации CSS

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

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

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

Начните с создания абзаца, к которому вам нужно анимировать процесс печати.

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

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

С помощью CSS мы добавим нужную анимацию, начав с определения ширины абзаца для того, чтобы дать анимации понять, насколько ей позволено увеличиться. Далее добавим скрытое переполнение overflow hidden для изменения размера абзаца до 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; }
}

.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

Источник: //www.paulund.co.uk/

Редакция: Команда webformyself.

Метки: css, плагин typed, эффекты