Ефект друкується за допомогою CSS3

Існує чимало рішень для реалізації ефекту тексту, що друкується, за допомогою javascript. На jQuery наприклад, можна з текстом виписувати такі кренделя, що дивуєшся. Але мене завжди цікавить можливість виконання того чи іншого завдання за допомогою властивостей CSS3, звичайно, тільки тоді, коли це виправдано і не зазнає явних втрат у загальній картині кінцевого результату. На одному з проектів, мені знадобилося (з легкої руки і по забаганню замовника) виконати короткий опис сайту у вигляді тексту, що друкується, що з'являється під логотипом вчасно завантаження. Якось не дуже хотілося через один рядок, підключати в роботу додатковий плагін. Довго шукати оптимального рішення не довелося, за допомогою CSS-анімації можна створити цілком привабливу ілюзію тексту, що друкується. Звичайно, з використанням спеціальних jQuery-плагінів, Typed.js наприклад, можливостей більше, у плані налаштувань та регулювання різних параметрів ефекту. Але для простенького тексту, що друкується, цілком можна обійтися виключно засобами CSS, достатньо лише кілька рядків коду і ваш текст оживе.

Використання анімації CSS

Перш ніж приступити до розбору та опису властивостей CSS, хочу попередити, що ефект відмінно працює в сучасних браузерах, Firefox, Chrome, Opera і навіть IE починаючи з 10-ї версії справляється з анімацією CSS. Для версій IE9 та ранніх, краще використовувати механізми JavaScript.

У CSS-анімації є чудова функція animation-timing-function, властивість яке описує метод розрахунку проміжних значень властивостей при анімації. За допомогою однієї з функцій цієї властивості, а самеsteps(), ми зможемо визначити кількість кадрів анімації,Видаливши звичну плавну анімацію і створимо блок анімації, що відтворює реальний ефект набору тексту. Використовуючи значення функції steps() , ми можемо реалізувати анімацію, збільшуючи розмір елементів, починаючи від0 і до кінця рядка(абзацу)

Застосуємо якість анімації для коротенького абзацу, для цього потрібний нам рядок тексту обернемо тегом

з певним класом, наприклад: , в результаті отримає наступну конструкцію в html:

Простий приклад створення тексту, що друкується, за допомогою CSS3-анімації.

Тепер безпосередньо вcss визначимо всі необхідні властивості для цього класу. Виставимо потрібну нам ширину абзацу, розмір, колір і зображення шрифту, додамо властивість overflow:hidden; , тим самим за допомогою зв'язки зі значенням0 у @keyframes приховаємо текст до включення анімації в роботу. І нарешті визначимо потрібні нам значення анімації у часовій функціїsteps()

Значення CSS для прикладу:

У роботі використав оригінальний сніпет з колекції paulund.