Анімований текст, що з’являється
У цьому уроці ми розглянемо як створити анімований текст, що з'являється. Іноді потрібно зробити, щоб текст не просто з'явився на сторінці, а поступово, плавно або навпаки швидко, але тільки після повного завантаження сторінки. Можливо потрібно просто виділити якусь частину тексту, щоб користувач звернув увагу (я маю на увазі сторінку, що продає або сторінку захоплення). В уроці є кілька видів появи, тому ви можете вибрати найбільш сподобався.
З приводу виділення тексту також був урок - Як створити текст, що обертається.
Приклад можна побачити тут:
Переглянути прикладЗавантажити
Як користуватися?
HTML частина
Необхідно завантажити jQuery( тут ) та плагін jquery.flipping_text.js( тут ), а потім підключити:
HTML код дуже простий. Вам потрібно лише задати певний клас, наприклад, для заголовка:
jQuery частина
Щоб використовувати плагін на сторінку, необхідно додати наступний код:
Плагін самостійно рахує кількість символів. Розглянь, що представляє кожна з цих властивостей:
- tickerTime - задається в мілісекундах. Визначає, наскільки швидко буде з'являтися буква.
- customRandomChar - ця властивість дозволяє задати довільний набір символів, які будуть відображатися перед появою кожного символу тексту. Переконатись у цьому можете на Демо 4.
- tickerCount — визначає скільки символів потрібно перебрати перед тим як показати потрібний символ з послідовності тексту.
- opacityEffect - можливість зробити символ який тільки з'явився нечітким (сірим). Приймає значення "false" та "true".
- resetOnChange — дозволяє зберегти скільки символів з'явилося, коли користувачклацнув на іншу вкладку. Може приймати значення false і true.
Цікавий ефект для тексту, який можна використовувати як на сторінці, що продає, так і на сторінці захоплення, щоб привернути увагу користувача 🙂 .