Створіть в CSS ефект введення тексту

21

Від автора: Нещодавно я виявив цей плагін jQuery, що дає можливість легко створювати на своєму сайті ефект введення тексту. Цей плагін з відкритим вихідним кодом є на Github під назвою typed.js. У цьому пості я покажу вам його, а також продемонструю, як створити ефект введення тексту за допомогою однієї лише анімації CSS.

Створіть в CSS ефект введення тексту

Встановити плагін легко: все, що вам знадобиться – це включити його в свій додаток і застосувати наступний код.

$(function(){
$(«.element»).typed({
strings: [«First sentence.», «Second sentence.»],
typeSpeed: 0
});
});

При завантаженні сторінки він почне друкувати перше речення, а потім – друге. Можна відрегулювати швидкість введення тексту, передавши кількість мілісекунд до завершення анімації.

Я створив демо-сторінку, щоб показати, як виглядає цей ефект.

Демо-сторінка Typed.js

Якщо хочете використовувати його в своїх проектах, що можете завантажити проект typed.js з github.

Проект Typed.js

Застосування анімації CSS

Плагін typed.js – простий і легкий спосіб застосувати jQuery, а це значить, що для його використання вам доведеться завантажити цю бібліотеку в додаток, утяжелив свою сторінку і застосувавши http запити. Добре, якщо це буде єдина можливість створити цей ефект, але його також можна зробити за допомогою одного лише CSS.

Анімація CSS дає можливість використовувати функцію визначення часу анімації, яка вирішує, яким чином та буде розвиватися до самого кінця. Одна з таких функцій визначення часу називається steps() і дозволяє призначити кількість використовуваних анімацією кадрів, вона видалить звичну вам гладку анімацію і створить анімацію з деякими затримками – точнісінько таку, яка потрібна нам для введення тексту.

За допомогою функції steps() можна створити анімацію, якої потрібно всього лише збільшувати до кінця абзацу розмір елемента з 0.

Почніть зі створення абзацу, до якого вам потрібно анімувати процес друку.

This is a paragraph that is being typed by CSS animation.

З допомогою CSS ми додамо потрібну анімацію, почавши з визначення ширини абзацу для того, щоб дати анімації зрозуміти, наскільки їй дозволено збільшитися. Далі додамо приховане переповнення overflow hidden для зміни розміру абзацу до 0 з тим, щоб ми не змогли бачити текст. Нарешті, можна додати анімацію введення тексту за допомогою функції визначення часу steps().

.css-typing
{
width: 30em;
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; }
}

Анімація збільшить розмір абзацу з 0 до 30em, створюючи, таким чином, за 50 кадрів ефект друку тексту. Подивіться демо-приклад, щоб зрозуміти, як це виглядає.

Демо-приклад CSS Steps