Легко анимировать текст с помощью Textillate.js
В нашем предыдущем посте мы познакомили вас с Animate.css, потрясающей библиотекой CSS3, которая облегчает создание CSS3-анимации. В этой статье мы познакомим вас с плагином jQuery, созданным с использованием Animate.css, который может анимировать текст, который называется Textillate.js.
Хотя вы можете анимировать текст с помощью Animate.css, он полностью анимирован, а не буква за буквой. Даже если у вас есть подход обернуть каждый символ в элемент и анимировать их, это будет хлопотно и неэффективно. С помощью этого плагина вы можете легко анимировать каждую букву вашего текста.
Textillate.js делит анимацию на 2 компонента: анимация входа и выхода. Вы можете применять их с различными анимациями, отдельно. Все анимационные эффекты используют библиотечные эффекты Animate.css.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Помимо 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.
- Вы также можете добавить параметры в инициализацию Javascript Textillate.js, как показано в следующем коде.
Помимо эффекта, есть и другие полезные опции, которые вы можете использовать. Чтобы увидеть полный список других опций, перейдите на страница документации,
Последняя мысль
Textillate.js — очень полезный плагин, особенно когда вы хотите привлечь пользователей к тексту, который вы хотите выделить больше всего. Это может быть заголовок вашего сайта, сервисы, обновления, продвижение или что-то еще. А для дополнительных улучшений вы можете комбинировать Textillate.js с другим плагином, таким как FitText.js предназначен для гигантского отображения текста. Еще раз, не забудьте использовать анимацию в нужных количествах.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)