—»     —»   Анимация текста при помощи Textillate.js
  Раздел: Анимация   Комментариев: 2  

Анимация текста при помощи Textillate.js



В нашей предыдущей статье мы рассказывали вам о Animate.css – невероятной CSS3-библиотеке, которая позволяет нам без труда создавать анимации. Сегодня же мы хотим рассказать вам о другом jQuery-плагине, разработанным при помощи Animate.css, который умеет анимировать текст. И называется он Textillate.js.

Несмотря на то, что текст можно анимировать и при помощи Animate.css, этот инструмент способен работать только со всем текстом целиком, а не с каждой буквой по-отдельности. Даже если вы можете разделить буквы на отдельные элементы, и применить анимацию ко всем по очереди, это будет слегка трудоемко и нудно. С помощью же этого плагина вы можете анимировать каждую отдельную букву в тексте.

Анимация текста при помощи Textillate.js

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. И снова хочется напомнить, чтобы вы не злоупотребляли анимацией в дизайне сайта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 4001   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 июня 2015 @ 14:11
Написал: Flector — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Для WordPress можно использовать плагин Easy Textillate (_https://wordpress.org/plugins/easy-textillate/).
Комментарий #2: 2 декабря 2015 @ 13:23
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Анимация позволяет привлечь внимание к важным моментам презентации, управлять потоком информации и повысить интерес аудитории. Анимация может применяться к текстам или объектам на отдельных слайдах, к текстам и объектам в ppdefSlideMaster или к заполнителям на пользовательских pplayout слайдов.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728