Анимированная типография на сайтах встречается все чаще и чаще, особенно на одностаничных ресурсах. Заголовки основных разделов стараются сделать более динамичными для усиления внимания или просто красивого оформления. Это не ограничивается hover-эффектами и использованием одной только каскадной таблицей, в частности, анимацией CSS свойством animation. Применяется также библиотека jQuery, JavaScript, готовые плагины, что позволяет добиться очень красивой анимации текста.
Сегодняшняя подборка состоит из нескольких jQuery-плагинов, которые легко подключаются к любому сайту. Для WordPress’a есть специальные модули, добавляющие анимацию как элементом сайта, так и анимацию к тексту.
JQuery-плагин textillate.js
Пожалуй, самый известный в сети интернет плагин анимации текста с креативными эффектами. Построен с использование Animate.css, Lettering.js и с добавлением библиотеки JQuery в итоге получается оживить каждую букву в слове.
Подключение textillate.js к сайту
Шаг 1-й. Скачиваем скрипт из официального сайта разработчика.
Шаг 2-й. В области хедера, между тегами <head>…</head>, подключаем все файлы скрипта. (Библиотеку JQuery подключайте в том случае, если ранее вы этого не делали). Также проследите, чтобы был указан правильный путь к файлам.
<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
