Ефект печатающегося тексту за допомогою CSS3

35

Эффект печатающегося текста с помощью CSS3

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

Demo

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

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

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

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

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

<p class="text-typing">Простий приклад створення печатающегося тексту за допомогою CSS3-анімації....</p>

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

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

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

.text-typing
{
width: 40em;
color:green;
font-size: 22px;
font-family: 'Marck Script', cursive;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}
@keyframes type{
from { width: 0; }
}
@-webkit-keyframes type{
from { width: 0; }
}

.text-typing
{
width: 40em;
color:green;
font-size: 22px;
font-family: ‘Marck Script’, cursive;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}
@keyframes type{
from { width: 0; }
}@-webkit-keyframes type{
from { width: 0; }
}

Всі! Ефект печатающегося тексту готовий. Спрацьовувати він буде кожен раз при перезавантаженні сторінки, потрібний вам текст ефектно віддрукується і завмре, виконавши повною мірою завдання, щоб його неодмінно помітив користувач відвідав ваш сайт.
Посилання на перегляд демо веде в онлайн-редактор коду, так що при бажанні можете досхочу поекспериментувати з параметрами. Якщо виявиться яка помилка в коді або косяк в плані відображення, будь-які поправки і доповнення, обов’язково пишіть в коментарях.

В роботі використовував оригінальний фрагмент з колекції paulund.

З повагою, Андрій.