Проста анімація тексту, використовуючи textillate.js

17

Від автора: В даному уроці хотів би поговорити про бібліотеку textillate.js, яка дозволяє буквально оживити тексти або заголовки Ваших веб-сторінок. Таким чином, при відображенні сторінки текст буде з’являтися на сторінці з обраної Вами анімацією. Що не тільки поліпшить зовнішній вигляд сторінки, але і допоможе акцентувати увагу користувачів на певних блоках сайту.

Проста анімація тексту, використовуючи textillate.jsПроста анімація тексту, використовуючи textillate.js

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

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

Проста анімація тексту, використовуючи textillate.js

Далі нас перенаправляють на сервіс GitHub, де представлена актуальна версія цієї бібліотеки:

Проста анімація тексту, використовуючи textillate.js

Тепер клікаємо по кнопці » Завантажити ZIP і викачуємо архів до себе на комп’ютер. Для сьогоднішнього уроку я підготував наступну сторінку:

Проста анімація тексту, використовуючи textillate.js

Її вихідний код наведений нижче:

Анімація тексту
body {
background-color: rgb(75, 191, 195);
}
#txt {
text-align: center;
font-size: 10em;
font-family: «monotype corsiva»
}
#tlt {
text-align: center;
font-size: 4em;
}
li {
list-style: none
}

Textillate

  • Заголовок
  • Додатковий текст

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

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

Тепер відкриваємо файл script.js і додамо наступний код:

jQuery(document).ready(function() {
$(«#txt»).textillate({});
});

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

Проста анімація тексту, використовуючи textillate.js

Налаштування анімації

Використовуючи дану бібліотеку можна виконати гнучке налаштування анімації під власні потреби:

jQuery(document).ready(function() {
$(«#txt»).textillate({
selector:’.texts’,
loop:true,
minDisplayTime:1000,
autoStart:true,
in: {
effect:’flipInY’,
delayScale:0.4,
delay:3000,
sync:false,
shuffle:false,
reverse:false,
callback:function() {
//alert(‘hello’);
}
},
out: {
effect:’rotateOut’,
callback:function() {
//alert(‘hello’);
}
}
});
});

Хотів би зазначити, що підтримується два види анімації. Анімація in – це поява тексту і анімація out – згасання тексту. Кожна з цих анімація настроюється окремо.

Налаштування:

selector – селектор блоку з текстом, для якого має працювати анімація. Дана настройка необхідна, якщо при виклику методу textillate(), був обраний блок, всередині якого є список елементів ul, а також додаткові блоки, які не повинні брати участь в анімації. Приміром, на тестовій сторінці, є блок

, всередині якого розташований список

    . Метод 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):

jQuery(document).ready(function() {
$(«#tlt»).textillate({
selector:’.texts’,
autoStart:false,
});
$(«#tlt»).textillate(‘in’,1);
});

При цьому ми побачимо, що на екрані з анімацією з’явиться напис «Додатковий текст»:

Проста анімація тексту, використовуючи textillate.js

Так само бібліотека textillate, підтримує декілька подій, що дозволить описати функції, код яких буде виконуватися при їх спрацюванні.

Події:

start.tlt – спрацьовує при запуску анімаційних ефектів textillate;

inAnimationBegin.tlt – спрацьовує при запуску анімації in;

inAnimationEnd.tlt – спрацьовує при закінченні анімації in;

outAnimationBegin.tlt – спрацьовує при запуску анімації out;

outAnimationEnd.tlt– спрацьовує при закінченні анімації out;

end.tlt– спрацьовує при завершенні роботи плагіна textillate.

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