Легко анимировать текст с помощью Textillate.js

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

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

Textillate.js делит анимацию на 2 компонента: анимация входа и выхода. Вы можете применять их с различными анимациями, отдельно. Все анимационные эффекты используют библиотечные эффекты Animate.css.

Помимо Animate.css, Textillate.js также построен на основе Lettering.js, Можно сказать, что этот плагин является комбинацией этих двух мощных инструментов. Animate.css работает с функцией анимации, а Lettering.js – с типографикой.

Применение

Textillate.js требуется несколько зависимостей, прежде чем он будет готов к использованию. Они есть Animate.css, Lettering.js а также JQuery, После того, как вы загрузили файлы, включите их в свой проект, вот так.

И не забудьте поместить библиотеку Animate.css в раздел head.

Основная разметка

Чтобы начать использовать Textillate.js, вы должны определить класс элемента, который хотите анимировать, а затем добавить в него выбранный вами эффект. Обратите внимание, что этот плагин работает только с текстом, который содержит элементы, поэтому любой элемент, который не является текстом, не будет анимирован.

Например, у нас есть элемент, который содержит здесь текст, и демонстрационный класс, вот так.

Мы называем имя класса инициализацией Textillate.js, вот так.

Текст теперь будет анимирован.

Опции Textillate.js

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

1. Сначала введите HTML-данные API, как показано ниже.

data-in-effect определяет эффект ввода текста. В то время как для эффекта выхода, вы можете использовать API-интерфейс data-out-effect.

1. Вы также можете добавить параметры в инициализацию Javascript Textillate.js, как показано в следующем коде.

Помимо эффекта, есть и другие полезные опции, которые вы можете использовать. Чтобы увидеть полный список других опций, перейдите на страница документации,

Последняя мысль

Textillate.js – очень полезный плагин, особенно когда вы хотите привлечь пользователей к тексту, который вы хотите выделить больше всего. Это может быть заголовок вашего сайта, сервисы, обновления, продвижение или что-то еще. А для дополнительных улучшений вы можете комбинировать Textillate.js с другим плагином, таким как FitText.js предназначен для гигантского отображения текста. Еще раз, не забудьте использовать анимацию в нужных количествах.