Как сделать эффект печатной машинки с помощью CSS
В этой статье вы узнаете, как сделать текст вашего сайта динамичным и более привлекательным, используя эффекты печатной машинки в чистом CSS.
Эффект печатной машинки предполагает постепенное появление текста, как будто он печатается на ваших глазах.
Добавление эффекта печатной машинки к фрагментам текста поможет привлечь посетителей вашего сайта и заинтересовать их в дальнейшем чтении. Эффект печатной машинки можно использовать для многих целей, например, для создания привлекательных посадочных страниц, элементов призыва к действию, персональных веб-сайтов и демонстрации кода.
Эффект печатной машинки легко создать
Все, что вам понадобится для того, чтобы разобраться в этом уроке - это базовые знания CSS и CSS-анимации.
Вот как будет работать эффект пишущей машинки:
- Анимация печатной машинки будет показывать наш текстовый элемент, изменяя его ширину от 0 до 100%, шаг за шагом, используя функцию CSS steps().
- Анимация мигания будет анимировать курсор, который "набирает" текст.
Создание веб-страницы для нашего эффекта набора текста
Сначала создадим веб-страницу для демонстрации печатной машинки. Он будет включать контейнер <div> для нашего печатного текста с классом typed-out:
<!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>Стилизация контейнера для текста печатной машинки
Теперь, когда у нас есть макет веб-страницы, давайте стилизуем <div> с помощью класса "typed-out".
.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}Обратите внимание, что для того, чтобы эффект печатной машинки работал, мы добавили следующее:
"overflow: hidden;"и"width: 0;", чтобы содержимое текста не было видно до тех пор, пока не начнется эффект набора текста."border-right: .15em solid orange;", чтобы создать курсор печатной машинки.
Перед созданием эффекта набора текста, чтобы остановить курсор на последней букве typed-out элемента после того, как он будет полностью набран, как это сделала бы печатная машинка (или текстовый процессор), мы создадим контейнер для typed-out элемента и добавим display: inline-block;:
.container {
display: inline-block;
}Создание анимации раскрытия текста
Анимация печатной машинки создаст эффект того, что текст внутри typed-out элемента печатается буква за буквой. Мы будем использовать правило анимации @keyframes CSS:
@keyframes typing {
from { width: 0 }
to { width: 100% }
}Как вы можете видеть, все, что делает эта анимация, это изменяет ширину элемента от 0 до 100%.
Теперь мы включим эту анимацию в наш класс typed-out и установим направление анимации на forward, чтобы убедиться, что текстовый элемент не вернется к width: 0 после завершения анимации:
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}Наш текстовый элемент будет просто раскрываться одним плавным движением слева направо:
Добавление шагов для достижения эффекта печатной машинки
Пока что наш текст раскрывается, но плавно, не раскрывая текст буква за буквой. Это начало, но, очевидно, это не то, как выглядит эффект печатной машинки.
Чтобы эта анимация раскрывала наш текстовый элемент буква за буквой (или по шагам), как это делает печатная машинка, нам нужно разделить анимацию typing, включенную классом typed-out, на шаги, чтобы она выглядела так, как будто текст набирается. В этом нам поможет функция CSS steps():
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation:
typing 1s steps(20, end) forwards;
}Как вы видите, мы разделили анимацию typing на 20 шагов с помощью функции CSS steps(). Вот что мы видим сейчас.
Вот наш полный код на данный момент:
<html>
<head>
<title>Typewriter effect</title>
</head>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
.container{
display: inline-block;
}
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
animation:
typing 1s steps(20, end) forwards;
font-size: 1.6rem;
width: 0;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
</style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>Настройка шагов для более длительного эффекта
Чтобы приспособиться к длинным фрагментам текста, необходимо увеличить шаги и продолжительность анимации набора текста.
Настройка шагов для более короткого эффекта
А чтобы приспособиться к более коротким фрагментам текста, нужно уменьшить шаги и продолжительность анимации набора текста:
Ссылка на Codepen
Настройка кода для эффекта мигающего набора текста
Мы можем сделать курсор тоньше или толще, изменив его свойство border-right: .15em solid orange;, или сделать курсор другого цвета, задать ему border-radius, настроить частоту его мигания и многое другое.
Вы можете поэкспериментировать с этими свойствами в демо-версии на CodePen и посмотреть, что еще вы можете придумать!
Комбинирование элементов анимации
Теперь, когда вы знаете, как сделать эффект печатной машинки в CSS, пришло время продемонстрировать несколько практических и актуальных случаев использования этого эффекта.
Эффект печатания портфолио
Можно использовать такой пример для личного портфолио. Эффекты печатной машинки могут выделить ваше веб-резюме/личный сайт и сделать его более привлекательным.
Демо-версия CodePen.
Эффект типизации API
Вот пример посадочной страницы API.
Вы можете потренироваться с демонстрацией этого API на CodePen.
Вполне вероятно, что на каком-то этапе своего пути разработчика вы сталкивались с посадочной страницей поставщика API и видели подобный блок кода, демонстрирующий реализацию их API. Я лично считаю, что это действительно практичная и уместная реализация эффекта печатной машинки, и считаю, что это выглядит более привлекательно и заманчиво, чем статичный кусок кода.
Эффекты печатной машинки на целевых страницах продуктов более привлекательны и заинтересовывают посетителей, желающих воспользоваться продуктами или услугами. Проведя много времени за разработкой веб-сервисов и веб-приложений, я могу сказать по своему опыту, что эффекты печатной машинки создают дополнительный интерес к вашим целевым страницам. Набранный текст типа "Начните сегодня" придает дополнительный импульс тексту призыва к действию.
Заключение
Мы видели в этой статье, как легко с помощью CSS создать анимированный текст "печатной машинки". Этот эффект печатания определенно может придать интерес и восхищение вашим веб-страницам.
Однако в конце стоит сделать небольшое предупреждение. Этот прием лучше всего использовать на небольших участках некритичного текста, просто чтобы создать немного дополнительной привлекательности. Но будьте осторожны и не полагайтесь на него слишком сильно, так как использование подобной CSS-анимации имеет некоторые ограничения. Обязательно протестируйте текст, напечатанный на пишущей машинке, на различных устройствах и при разных размерах экрана просмотра, так как результаты могут отличаться на разных платформах. Также подумайте о конечных пользователях, использующих вспомогательные технологии, и в идеале проведите несколько тестов на удобство использования, чтобы убедиться, что вы не усложняете жизнь своим пользователям. Если вы можете сделать что-то с помощью чистого CSS, это еще не значит, что вы должны это делать. Если эффект печатной машинки важен для вас и вы хотите использовать его для более важного контента, возможно стоит рассмотреть также решения на JavaScript.
В любом случае, я надеюсь, что вам понравилась эта статья, и что она заставила вас задуматься о других интересных вещах, которые можно сделать с помощью CSS-анимации, чтобы добавить интересный и забавный характер вашим веб-страницам.