Каскадні таблиці стилів (CSS) пройшли довгий шлях з моменту свого створення. Є речі, які можливі лише за допомогою CSS, про які ви можете не знати, завдяки безперервному розвитку та вдосконаленню мови.
Одним із найпомітніших досягнень CSS є поява та вдосконалення функцій CSS, які значно розширили можливості та потужність стилізації веб-вмісту.
Що таке ефект друкарської машинки?
Ефект друкарської машинки — це техніка текстової анімації, яка імітує процес поступового розкриття вмісту, імітуючи процес друкування, коли він розгортається перед очима глядача. Цей ефект нагадує старі друкарські машинки, ранні комп’ютерні термінали або інтерфейси командного рядка (CLI).
Поступова поява тексту додає елемент напруженості та інтриги, заохочуючи аудиторію звернути пильну увагу на повідомлення, що розгортається.
Як працює функція CSS steps().
Функції в CSS забезпечують рівень гнучкості, якого раніше було важко досягти, використовуючи лише статичні стилі. Функція steps() є популярною функцією, яка використовується в анімації CSS. Завдяки цьому анімація виглядає так, ніби вона просувається чіткими, окремими кроками замість плавного переходу.
steps() — це функція синхронізації анімації, яка приймає два параметри. Перший параметр вказує на кількість кроків, які має виконати ваша анімація. Другий параметр визначає поведінку кожного кроку. Синтаксис функцій steps() виглядає так:
animation-timing-function: steps(n, direction)
У наведеному вище блоці коду функція steps() має два параметри, а саме: n і напрямок. Параметром напрямку може бути початок або кінець.
Встановлення напрямку для початку гарантує, що перший крок буде завершено, як тільки розпочнеться анімація. У той час як встановлення напрямку до кінця завершуватиме останній крок після завершення анімації. Щоб проілюструвати важливість функції steps(), подивіться на такий HTML-код:
<div class="container">
<div></div>
</div>
Наведений вище блок коду визначає контейнер div з дочірнім div. Якщо ви хочете, щоб дочірній елемент div ковзав по екрану, ви використовуєте анімацію CSS так:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Наведений вище блок коду використовує правило @keyframes для визначення анімації під назвою movebox. Потім ця анімація застосовується до дочірнього елемента div, змушуючи його плавно переміщатися екраном у нескінченному циклі.
Якщо вам не подобається плавна анімація і ви бажаєте досягти «переривчастого» ефекту, ви можете скористатися такою функцією steps():
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Як ви можете бачити на GIF нижче, включення функції steps() із значенням параметра 10 анімуватиме дочірній div поетапно замість плавної анімації. Що більша кількість кроків, то менш ривчастою буде ваша анімація.
У наведеному вище прикладі надано параметр напрямку. Однак, якщо ви пропустите напрямок, браузер використовуватиме end як значення за замовчуванням для напрямку.
Створення ефекту друкарської машинки
Тепер, коли ви розумієте, як працює функція steps(), настав час застосувати все, про що ви дізналися, на практиці. Створіть нову папку та дайте їй відповідне ім’я. У цю папку додайте файл index.htm для розмітки та файл style.css для стилізації.
У файлі index.htm додайте такий шаблонний код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Наведений вище блок коду визначає розмітку для простого HTML-сайту. Існує контейнер div, який містить інший div з деяким фіктивним текстом.
Анімація тексту
Відкрийте файл styles.css і встановіть ширину контейнера div на ширину його вмісту.
.container{
width: fit-content;
}
Далі, використовуючи правило @keyframes, визначте анімацію, яка контролює, як анімація прогресує з часом. Встановіть ширину на «0%» на 0%. На 100% встановіть ширину на «100%», як це:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Далі виберіть елемент із текстом назви класу та встановіть для властивості переповнення значення hidden. Це гарантує, що текст залишатиметься прихованим, доки не почнеться ефект набору тексту. Після цього переконайтеся, що текст залишається в одному рядку, встановивши для властивості пробілу значення nowrap. Надайте класу тексту моноширинний шрифт і додайте зелену вертикальну рамку праворуч від тексту.
Ця межа буде виглядати як курсор. Установіть відповідний розмір шрифту та властивість анімації type-text. Нарешті, додайте функцію steps() до функції animation-timing-function.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Коли ви запускаєте код у браузері, ви повинні побачити ось що:
Якщо вам потрібен довший ефект набору тексту, ви можете налаштувати тривалість анімації та кількість кроків, указаних у функції steps().
Оживлення курсору
Ефект друкарської машинки майже завершений, хоча не вистачає однієї функції, а саме миготливого курсору. Згадайте, що в останньому блоці коду на тексті була встановлена права межа, яка служить курсором. Ви також можете додати анімацію до цього курсору за допомогою правила @keyframes.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Після визначення настроюваної анімації додайте назву анімації до властивості анімації в текстовому класі та встановіть тривалість 0,6 секунди.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Тепер, коли ви запускаєте код, ви повинні побачити миготливий курсор.
Потужність функцій CSS
Функції CSS зробили революцію у створенні веб-сайтів, запропонувавши чудовий набір інструментів для вас як розробника. Ці універсальні функції забезпечують динамічний стиль і взаємодію, які колись були зарезервовані для складних мов сценаріїв.
Від маніпулювання кольором до адаптивних макетів, анімації та творчих трансформацій, функції CSS розширили можливості веб-дизайну. За допомогою таких функцій, як calc() для гнучких обчислень, linear-gradient() для приголомшливого фону та translate() для захоплюючої анімації, ви можете створювати візуально привабливі та захоплюючі враження від користувачів.