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

Большое разнообразие плагинов на JavaScript позволяют придать «жизни» сайту, и могут значительно улучшить передачу настроения пользователю сайта. Так в значительной степени используются различные эффекты на посадочных страницах – Landing Pages, элементы отсчёта, анимация при скроллинге, эффект parallax, и многое другое.

В данном посту мы рассмотрим ещё один интересный плагин, который позволяет имитировать набор текста на сайте. Особенно здорово это смотрится в сочетании с какими-либо сопутствующими элементами.

Плагин называется Typed.js, и для его работы так же требуется подключение библиотеки JQuery. Использование библиотеки JQuery сегодня становиться обычным делом практически для каждого рядового сайта. Ранее уже был пост про похожий плагин с похожим названием Typeit, но всё-таки они имеют некоторые отличия.

Подключение нужных библиотек

Скачать библиотеку Typed.js вы можете на гитхабе, ссылка на исходники будет в конце поста. Перед использованием библиотеки Typed.js так же следует подключить библиотеку JQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/typed.js" type="text/javascript"></script>

Простой вызов Typed.js

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

<div class="typed-strings">
    <span>Typed.js is a <strong>jQuery</strong> plugin.</span>
    <p>It <em>types</em> out sentences.</p>
    <p>And then deletes them.</p>
    <p>Try it out!</p>
</div>
<span class="typed"></span>

Код вызова плагина Typed.js:

    (function ($) {
        $(document).ready(function () {
            $(".typed").typed({
                stringsElement: $('.typed-strings'),
            });
        });
    })(jQuery);

Параметры инициализации плагина

Пожалуй, это минимум, чтобы плагин начал работать. Однако благодаря большому количеству параметров можно настроить работу плагина более тонко. Основные параметры инициализации плагина описываются ниже.

$(".element").typed({
    strings: ["First sentence.", "Second sentence."], // строки для вывода
    stringsElement: null, // вывод текста с использованием html-элементов, к примеру тег <p>
    typeSpeed: 0, // скорость имитации набора текста
    startDelay: 0, // длительность паузы перед началом печати
    backSpeed: 0, // скорост затирания текста
    shuffle: false, // строки в перемешку
    backDelay: 500, // длительность паузы перед стиранием текста
    loop: false, // цикличное повторение
    loopCount: false, // количество итерации, false - бесконечно
    showCursor: true, // показ курсора при наборе
    cursorChar: "|", // символ в качестве курсора
    attr: null, // смена текста в атрибуте (null — текст в самом элементе)
    contentType: 'html', // Формат текста html/text
    callback: function () {}, // обработчик события по завершению печати
    preStringTyped: function () {}, // обработчик события перед началом печати
	onStringTyped: function () {}, // обработчик события для каждой напечатанной строки
    resetCallback: function () {} // обработчик события при сбросе $(".element").typed('reset')
});

Кроме того, плагин позволяет сделать набор текста более похожим по поведению с человеческим. К примеру, можно выставить определённую паузу после набора определённого слова, и так далее по тексту.

$(".element").typed({
    strings: ["First ^1000 sentence.", "Second sentence."]
});

Таким образом, после набора слова «First» будет выдерживаться пауза в 1000 мс, после чего набор текста будет продолжаться далее. На мой взгляд с таким функционалом можно делать различные крутые штуки на сайте, дайте волю фантазии. На этом у меня всё, всем успехов в проектах!

Ссылка на проект Type.js
Исходники Type.js