Несмотря на то, что текст можно анимировать и при помощи Animate.css, этот инструмент способен работать только со всем текстом целиком, а не с каждой буквой по-отдельности. Даже если вы можете разделить буквы на отдельные элементы, и применить анимацию ко всем по очереди, это будет слегка трудоемко и нудно. С помощью же этого плагина вы можете анимировать каждую отдельную букву в тексте.
Textillate.js разделяет анимацию на 2 компонента: анимацию типа in и типа out. Вы можете применять эти свойства, используя разные анимационные эффекты по-отдельности. Все анимационные эффекты используют эффекты из библиотеки Animate.css.
Кроме Animate.css, Textillate.js также основывается на Lettering.js. Можно сказать, что этот плагин представляет собой комбинацию из этих 2 многофункциональных инструментов. Animate.css работает с функцией анимации, а Lettering.js больше сосредоточен на типографике.
Применение
Перед непосредственным применением, для Textillate.js нужно будет организовать несколько зависимых блоков, среди которых Animate.css, Lettering.js и jQuery. После того, как скачаете нужные файлы, включите их в проект следующим образом:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>И не забудьте поместить Animate.css в заголовочную часть вашего шаблона.
<link href="css/animate.css" rel="stylesheet">Базовая разметка
Чтобы начать использовать Textillate.js, вам нужно будет определить класс элемента, который вы хотите анимировать, а затем добавить выбранный эффект. Пожалуйста учтите, что данный плагин работает только с текстом, который содержит элементы, потому что элементы, которые не являются текстом, не будут анимированы.
В качестве примера приводим элемент, который содержит текст, а также класс demo:
<div class="demo">
<p>Each of this letter will animate.</p>
</div>Мы запускаем имя класса вместе с инициализацией Textillate.js следующим образом:
<script>
$(function () {
$('.demo').textillate();
})
</script>Теперь текст будет анимирован.
Опции Textillate.js
В предыдущем javascript-коде мы применяем лишь стандартную анимацию. Чтобы изменить ее, вам будет предложено 2 метода:
1. Прежде всего, её можно изменить за счет добавления HTML data api.
<div class="demo" data-in-effect="rollIn">
<p>Each of this letter will animate.</p>
</div>data-in-effect определяет входящий эффект текста. Что же касается выходящего эффекта, вы можете воспользоваться data-out-effect api.
2. Вы также можете добавлять опции в javascript-инициализацию Textillate.js, как показано в следующем далее коде:
<script>
$(function () {
$('.demo').textillate({
in: {
effect: 'rollIn'
}
});
})
</script>Вдобавок к эффекту, здесь представлено и множество других полезных опций, которые можно использовать. Чтобы просмотреть полный список опций, пройдите на страницу документации.
В завершение
Textillate.js – это очень удобный плагин, особенно если вы хотите привлечь внимание посетителей к тексту или хотите выделить самую важную его часть. Это могут быть заголовки, услуги, обновления, реклама и что угодно. Что же касается дальнейшей модернизации, вы можете комбинировать Textillate.js с другими плагинами, типа FitText.js. И снова хочется напомнить, чтобы вы не злоупотребляли анимацией в дизайне сайта.
