Простая анимация текста, используя textillate.js

Простая анимация текста, используя textillate.js

От автора: В данном уроке хотел бы поговорить о библиотеке textillate.js, которая буквально позволяет оживить тексты или заголовки Ваших веб-страниц. Таким образом, при отображении страницы текст будет появляться на странице с выбранной Вами анимацией. Что не только улучшит внешний вид страницы, но и поможет акцентировать внимание пользователей на определенных блоках сайта.

скачать исходникискачать урок

Установка библиотеки

Первым делом установим библиотеку textillate.js, для этого переходим на сайт http://jschr.github.io/textillate/ и кликаем по кнопке Download on Github:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Далее нас перенаправляют на сервис GitHub, где представлена актуальная версия данной библиотеки:

Теперь кликаем по кнопке Download ZIP и скачиваем архив к себе на компьютер. Для сегодняшнего урока я подготовил следующую страницу:

Ее исходный код представлен ниже:

Как Вы видите, страница содержит два блока с текстом, которые необходимы для изучения функционала библиотеки. Теперь давайте подключим необходимые файлы из скачанного архива к веб-странице:

Для работы библиотеки textillate.js, необходима библиотека jquery, которая должна подключаться самой первой. Файл script.js – это пустой файл, в котором мы будем кодировать на языке JavaScript.

Теперь открываем файл script.js и добавим следующий код:

То есть, выбираем при помощи библиотеки jQuery блок с идентификатором txt и вызываем метод .textillate(). Который запустит анимацию текста при отображении в браузере:

Настройки анимации

Используя данную библиотеку можно выполнить гибкую настройку анимации под собственные нужды:

Хотел бы отметить, что поддерживается два вида анимации. Анимация in – это появление текста и анимация out – исчезание текста. Каждая из этих анимация настраивается отдельно.

Настройки:

selector – селектор блока с текстом, для которого должна работать анимация. Данная настройка необходима, если при вызове метода textillate(), был выбран блок, внутри которого есть список элементов ul, а также дополнительные блоки, которые не должны участвовать в анимации. К примеру, на тестовой странице, есть блок <h1 id=»tlt»>, внутри которого расположен список <ul class=»texts»>. Метод textillate(), вызывается для блока h1, а настройка selector, сдержит селектор .texts.

loop – зацикливание анимации, при этом текст будет появляться и исчезать;

minDisplayTime – время отображения текста перед анимацией исчезания;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

autoStart – если передать false, то анимация будет запрещена и текст показан не будет, до тех пор, пока анимация не будет запущена вручную.

Настройки анимаций in и out:

effect – анимационный эффект. Список анимационных эффектов, приведен в дополнительных материалах к уроку.

delayScale – коэффициент временной задержки для каждого последующего символа текста, к которому применена анимация. Используя данный коэффициент, можно регулировать скорость анимации.

delay – время в миллисекундах анимации каждого символа;

sync – анимация всех символов одновременно, если передать значение true;

shuffle – анимация символов текста в случайном порядке, если передать значение true;

reverse – анимация в обратном порядке, если передать значение true;

callback – функция которая выполнится после завершения анимации, либо in либо out.

Помимо настроек, библиотека поддерживает несколько методов:

$(«#txt»).textillate(‘in’) – запуск анимации in;

$(«#txt»).textillate(‘out’) – запуск анимации out;

$(«#txt»).textillate(‘stop’) – остановка анимации;

$(«#txt»).textillate(‘start’) – запуск анимаций in и out;

Хотел бы отметить, что если анимация применяется к блоку со списком элементов, к примеру к блоку ul, то анимация отрабатывает для каждого элемента списка в отдельности. При этом, каждому элементу списка (каждый текст), присваивается индекс, начиная с нуля. Индексы, можно использовать для вызова анимации к определенному элементу списка.

Например, следующий код, запустит анимацию in для текста с индексом 1, блока с идентификатором #tlt (а точнее второго элемента списка ul):

При этом мы увидим, что на экране с анимацией появится надпись “Дополнительный текст”:

Так же библиотека textillate, поддерживает несколько событий, что позволит описать функции, код которых будет выполняться при их срабатывании.

События:

start.tlt – срабатывает при запуске анимационных эффектов textillate;

inAnimationBegin.tlt – срабатывает при запуске анимации in;

inAnimationEnd.tlt – срабатывает при окончании анимации in;

outAnimationBegin.tlt – срабатывает при запуске анимации out;

outAnimationEnd.tlt– срабатывает при окончании анимации out;

end.tlt– срабатывает при завершении работы плагина textillate.

На этом данный урок завершен. Всего Вам доброго и до новых встреч!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Никки

    Спасибо! С вашим уроком разобрался, а с исходником не получалось.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree