Каскадні таблиці стилів (CSS) зазнали значних змін від моменту своєї появи. Завдяки постійному розвитку та вдосконаленню цієї мови, існують можливості, що реалізуються виключно засобами CSS, про які ви, можливо, навіть не здогадуєтеся.
Одним із найбільш помітних досягнень CSS є розширення функціоналу та потужності, що стали можливі завдяки впровадженню функцій CSS. Це дозволило значно розширити можливості стилізації веб-контенту.
Що являє собою ефект друкарської машинки?
Ефект друкарської машинки – це техніка анімації тексту, яка створює ілюзію поступового розкриття змісту, ніби його друкують на очах у глядача. Цей ефект викликає асоціації зі старими друкарськими машинками, ранніми комп’ютерними терміналами або інтерфейсами командного рядка (CLI).
Поетапна поява тексту додає елемент напруження та інтриги, привертаючи увагу аудиторії до повідомлення, що поступово розгортається.
Принцип роботи функції CSS steps().
Функції в CSS надають рівень гнучкості, який раніше було складно досягти, використовуючи лише статичні стилі. Функція `steps()` є популярним інструментом, що застосовується в анімації CSS. Завдяки їй анімація виглядає так, ніби вона рухається чіткими, відокремленими кроками, а не плавно.
`steps()` – це функція для керування часом анімації, яка приймає два параметри. Перший параметр визначає кількість кроків, на які має розбиватися анімація. Другий параметр визначає поведінку кожного кроку. Синтаксис функції `steps()` виглядає наступним чином:
animation-timing-function: steps(n, direction)
У наведеному вище прикладі функція `steps()` має два параметри: `n` та `direction`. Параметр `direction` може набувати значення `start` або `end`.
Встановлення `direction` на `start` гарантує, що перший крок буде виконано одразу після початку анімації. Натомість встановлення `direction` на `end` завершить останній крок після закінчення анімації. Для ілюстрації важливості функції `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` поетапно, замість плавного руху. Чим більша кількість кроків, тим менш “рваним” буде рух.
У прикладі вище задано параметр `direction`. Однак, якщо його пропустити, браузер використовуватиме `end` як значення за замовчуванням.
Створення ефекту друкарської машинки
Тепер, коли ви розумієте принцип роботи функції `steps()`, настав час застосувати отримані знання на практиці. Створіть нову папку і дайте їй відповідну назву. У цій папці створіть файл `index.htm` для розмітки та файл `style.css` для стилізації.
У файлі `index.htm` додайте наступний шаблонний код:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Документ</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%;
}
}
Потім виберіть елемент із класом `text` і встановіть для властивості `overflow` значення `hidden`. Це забезпечить приховування тексту до початку ефекту друку. Після цього переконайтеся, що текст залишається в одному рядку, встановивши для властивості `white-space` значення `nowrap`. Задайте класу `text` моноширинний шрифт та додайте зелену вертикальну межу праворуч від тексту.
Ця межа виконуватиме роль курсора. Задайте відповідний розмір шрифту та застосуйте властивість анімації `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;
}
}
Визначивши анімацію, додайте її назву до властивості `animation` в класі `text` та задайте тривалість 0,6 секунди.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Тепер, коли ви запустите код, ви побачите миготливий курсор.
Потужність функцій CSS
Функції CSS зробили революцію у веб-розробці, надавши розробникам потужний інструментарій. Ці універсальні функції забезпечують динамічні стилі та взаємодію, які раніше були можливі лише з використанням складних мов програмування.
Від маніпулювання кольорами до адаптивних макетів, анімації та креативних трансформацій – функції CSS розширили горизонти веб-дизайну. Використовуючи такі функції, як `calc()` для гнучких обчислень, `linear-gradient()` для створення приголомшливих фонів та `translate()` для захопливої анімації, ви можете створювати візуально привабливі та цікаві користувацькі інтерфейси.