Анимации текста на jQuery
Опубликовано: 01.09.2018
Анимированная типография на сайтах встречается все чаще и чаще, особенно на одностаничных ресурсах. Заголовки основных разделов стараются сделать более динамичными для усиления внимания или просто красивого оформления. Это не ограничивается hover-эффектами и использованием одной только каскадной таблицей, в частности, анимацией CSS свойством animation. Применяется также библиотека jQuery, JavaScript, готовые плагины, что позволяет добиться очень красивой анимации текста.
Сегодняшняя подборка состоит из нескольких jQuery-плагинов, которые легко подключаются к любому сайту. Для WordPress’a есть специальные модули, добавляющие анимацию как элементом сайта , так и анимацию к тексту .
JQuery-плагин textillate.js
Пожалуй, самый известный в сети интернет плагин анимации текста с креативными эффектами. Построен с использование Animate.css , Lettering.js и с добавлением библиотеки JQuery в итоге получается оживить каждую букву в слове.
Создание анимации на JavaScript / Библиотека Anime.js!
Подключение textillate.js к сайту
Шаг 1-й. Скачиваем скрипт из разработчика.
Шаг 2-й. В области хедера, между тегами <head>…</head>, подключаем все файлы скрипта. (Библиотеку JQuery подключайте в том случае, если ранее вы этого не делали). Также проследите, чтобы был указан правильный путь к файлам.
Изучаем jQuery | Урок №23 - Красивая анимация
<link href="textillate/animate.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="textillate/jquery.lettering.js"></script> <script src="textillate/jquery.textillate.js"></script>
Шаг 3-й. В зависимости от выбора эффекта, дополнительных опций, подключается скрипт запуска анимации. В котором содержится определенный класс, указывающий в каком блоке анимировать текст.
Пример.
HTML
<h1 class="textillate-demo">Цитаты великих людей</h1>Script запуска
<script> $(function () { $(' .textillate-demo ').textillate({ in: { effect: 'bounceInLeft' } }); }) </script>Основные опции и настройка плагина textillate.js
$('.tlt').textillate({ // селектор по умолчанию для использования нескольких текстов для анимации selector: '.texts', // Повтор анимации true/false loop: false, // устанавливает минимальное время отображения текста, дальше идет исчезновение текста с указанным эффектом minDisplayTime: 2000, // устанавливает начальную задержку перед началом анимации // (обратите внимание, что в зависимости от эффекта вам, возможно, придется применять вручную // visibility: скрытый элемент перед запуском этого плагина) initialDelay: 0, // автоматический запуск анимации true/false autoStart: true, // custom set of 'in' effects. This effects whether or not the // character is shown/hidden before or after an animation inEffects: [], // эффект анимации в исчезновении текста outEffects: [ 'hinge' ], // Выбор эффекта в появлении текста in: { // название эффекта effect: 'fadeInLeftBig', // время появления каждой буквы delayScale: 1.5, // установить задержку между символами delay: 50, // одновременное появление эффекта true/false sync: false, // рандомная последовательность символов // (заметим, что рандом не имеет смысла с sync = true) shuffle: false, // обратная последовательность символов // (заметим, что обратное не имеет смысла с sync = true) reverse: false, // callback that executes once the animation has finished callback: function () {} }, // настройка исчезновении анимации out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, shuffle: false, reverse: false, callback: function () {} }, // callback that executes once textillate has finished callback: function () {}, // задать Тип маркера для анимации (доступные типы: символ 'char' и слово 'word') type: 'char' });Библиотека включает в себя набор готовых классов (API), с помощью которых можно реализовать последующий показ текста. Эффекты, входа и выхода анимации, могут быть заданы абсолютно разные для каждого текста в отдельности.
Пример.
HTML
<h1 class="tlt"> <ul class="texts"> <li data-out-effect="fadeOutUpBig" data-out-shuffle="true">Первый текст</li> <li data-in-effect="bounceInLeft">Второй текст</li> <li data-in-effect="fadeIn">Третий текст</li> </ul> </ul> </h1>Script запуска
<script> $(function () { $('.tlt').textillate({ loop: true, }); }) </script>data-out-effect – эффект выхода (out).
data-in-effect – эффект входа (in).По желанию, возможно, детально настроить анимацию не только текста, но и буквы. То есть задать время появления, исчезновения и остальных, так сказать, опций.
Пример.
HTML
<h1 class="textillate-demo">JQuery-плагин textillate.js</h1>Script запуска
<script> $(function () { $('.textillate-demo').textillate({ loop: true, minDisplayTime: 1000, initialDelay: 0, autoStart: true, inEffects: [], outEffects: [ 'fadeOutUpBig' ], in: { effect: 'fadeInUpBig', delayScale: 1.5, delay: 50, sync: false, shuffle: false }, out: { effect: 'fadeOutUpBig', delayScale: 1.5, delay: 50, sync: false, shuffle: false, } }); }) </script>Мой демо-показ я собрал на одной страницы. Больше примеров находится на официальном сайте.
JQuery-плагин textualizer.js
Shuffle Letters Effect
Sliding Letters
