Категория:
Опубликовано:

Typed.js - имитация набора текста

Typed.js

Эффект печати текста с помощью jQuery-библиотеки Typed.js

Имитируем набор текста по буквам. Возможно использование нескольких строк, создавая впечатление "общения" сайта с пользователем.

Очень интересный спецэффект!

Библиотеку разработал программист из Техаса Matt Boldt.

Скачать библиотеку можно с её странички или из Git'а.

Из архива извлекаем саму библиотеку typed.js, или её сжатую версию typed.min.js и подключаем её к страничке, не забывая про сам jQuery.

Создадим следующую конструкцию:

$(function(){
 $(".element").typed({
  strings: ["Первое предложение", "Второе предложение", "Третье предложение"], typeSpeed: 0
 });
});

И выводим блок с классом .element на странице.

Для имитации мигающего курсора добавляем следующие стили:

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Полное описание возможностей функции:

    $(function(){
        $(".element").typed({
            strings: ["Первое предложение.", "Второе предложение."], // строки выводимые в печать
            typeSpeed: 0, // скорость набора
            backSpeed: 0, // скорость удаления текста
            startDelay: 0, // начальная задержка перед набором
            backDelay: 500, // пауза перед удалением текста
            loop: false, // повтор (true или false)
            loopCount: false, // число повторов, false = бесконечно
            showCursor: true, // отображение курсора
            attr: null, // атрибут
            callback: function(){ } // функция вызываемая после окончания работы плагина
        });
    });
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий