Та, що біжить рядок дозволяє демонструвати інформацію в яскравій динамічній формі, використовуючи різні спецефекти, залучаючи значну увагу відвідувачів сайту. Так, наприклад, інформація може рухатися зверху вниз і знизу вгору, справа наліво і зліва на право, взад-вперед і назад, повільно і швидко, пробігаючи тільки один раз, а потім залишаючись, як звичайний текст. Можуть по черзі друкуватися кілька рядків.
У найпростішому варіанті текст просто «біжить», рухаючись справа наліво. Дуже часто крім простого тексту, що біжать рядки можуть генерувати найпростішу графіку і накладати різні ефекти на який відображається текст.
Анімація CSS дає можливість використовувати функцію визначення часу анімації, яка вирішує, яким чином та розвиватиметься до самого кінця. Одна з таких функцій визначення часу називається steps () і дозволяє призначити кількість використовуваних анімацією кадрів, вона видалить звичну вам гладку анімацію і створить анімацію з деякими затримками - в точності таку, яка потрібна нам для введення тексту.
За допомогою функції steps () можна створити анімацію, якою буде потрібно всього лише збільшувати до кінця абзацу розмір елемента з нуля до повного розміру.
Починаємо з створення абзацу, який продемонструє роботу анімованого процесу друку.
За допомогою CSS ми додамо потрібну анімацію. Далі додамо приховане переповнення overflow hidden для зміни розміру абзацу до 0 з тим, щоб ми не змогли бачити текст. Нарешті, можна додати анімацію введення тексту за допомогою функції визначення часу steps ().
Анімація збільшить розмір абзацу з 0 до 100%, створюючи, таким чином, за 50 кадрів ефект друку тексту.
Подивіться демо-приклад, щоб зрозуміти, як це виглядає.
Та, що біжить рядок за допомогою анімації на CSS3.
- step - Назва анімації (довільно)
- 5s - Час анімації
- steps (50) - Кількість "кадрів" анімації
- infinite - Нескінченний повтор (для наочності)
Виходить як би ефект друкуючої машинки. А тепер змусимо цю строчку рухатися, для цього досить прописати text-align: right; або text-align: center; і рядок "побіжить" вправо або тільки до центру відповідно.
Зміни і доповнення в стилях і результат (Якщо анімація закінчила роботу - перезавантажте сторінку):
Та, що біжить рядок за допомогою анімації на CSS3.
Та, що біжить рядок за допомогою анімації на CSS3.
Та, що біжить рядок за допомогою анімації на CSS3.
Анімації починають свою роботу відразу при відкритті сторінки і після закінчення циклу (в прикладах вище повтор по 3 рази) зупиняються (виняток перший приклад, там включено "нескінченне" програвання infinite) і починають працювати тільки після перезавантаження сторінки.
Для того, щоб анімації починали працювати в міру появи на сторінці в наступній статті. .