Вам не нужен JavaScript, чтобы создать классический эффект пишущей машинки. Узнайте, как это сделать с помощью CSS, используя функцию Steps().

Каскадные таблицы стилей (CSS) прошли долгий путь с момента своего появления. Есть вещи, которые возможны только с помощью CSS, о которых вы можете не знать, благодаря постоянной эволюции и совершенствованию языка.

Одним из наиболее заметных достижений в CSS является появление и усовершенствование функций CSS, которые значительно расширили возможности и возможности стилизации веб-контента.

Что такое эффект пишущей машинки?

Эффект пишущей машинки — это техника текстовой анимации, которая имитирует процесс постепенного раскрытия контента, имитируя процесс набора текста, разворачивающийся перед глазами зрителя. Этот эффект напоминает пишущие машинки старой школы, первые компьютерные терминалы или Интерфейсы командной строки (CLI).

Постепенное появление текста добавляет элемент напряжения и интриги, побуждая аудиторию обратить пристальное внимание на разворачивающееся сообщение.

instagram viewer

Как работает функция CSS Steps()

Функции в CSS обеспечивают уровень гибкости, которого раньше было сложно достичь, используя только статические стили. шаги() function — популярная функция, которая используется в CSS-анимации. Благодаря этому анимация выглядит так, будто она развивается отдельными, дискретными шагами, а не плавно переходит.

шаги() — это функция синхронизации анимации, которая принимает два параметра. Первый параметр обозначает количество шагов, которые вы хотите, чтобы ваша анимация выполняла. Второй параметр определяет поведение каждого шага. Синтаксис для шаги() функции выглядят следующим образом:

animation-timing-function: steps(n, direction)

В приведенном выше блоке кода шаги() функция имеет два параметра, а именно: н и направление. направление параметр может быть либо начинать или конец.

Установка направление к начинать гарантирует, что первый шаг будет выполнен сразу после запуска анимации. Принимая во внимание, что установка направление к конец выполнит последний шаг после завершения анимации. Чтобы проиллюстрировать важность шаги() функции, взгляните на следующий HTML-код:

<divclass="container">
<div>div>
div>

Блок кода выше определяет контейнер div с дочерним элементом div. Если вы хотите, чтобы дочерний элемент div скользил по экрану, вы используете анимацию CSS следующим образом:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

В приведенном выше блоке кода используется Правило @keyframes для определения анимации названный перемещение. Затем эта анимация применяется к дочернему элементу div, заставляя его плавно перемещаться по экрану в бесконечном цикле.

через GIPHY

Если вам не нравится плавная анимация и вы хотите добиться «прерывистого» эффекта, вы можете использовать шаги() функционируйте следующим образом:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

Как вы можете видеть на GIF-изображении ниже, включая шаги() Функция со значением параметра 10 будет анимировать дочерний элемент div поэтапно, а не плавно. Чем больше шагов, тем менее прерывистой будет выглядеть ваша анимация.

через GIPHY

В приведенном выше примере направление указан параметр. Однако, если вы опустите направление, браузер будет использовать конец в качестве значения по умолчанию для направление.

Создание эффекта пишущей машинки

Теперь, когда вы понимаете, как шаги() Функция работает, пришло время применить все, что вы узнали, на практике. Создайте новую папку и дайте ей подходящее имя. В эту папку добавьте index.htm файл для разметки и стиль.css файл для стилизации.

в index.htm файл, добавьте следующий шаблонный код:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
 Lorem ipsum dolor sit amet consectetur 
 adipisicing elit. Reiciendis, tempore! 
div>
div>
body>
html>

Блок кода выше определяет разметку для простой HTML-сайт. Eсть контейнер div, который содержит еще один div с фиктивным текстом.

Анимация текста

Открой стили.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;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

Когда вы запустите код в браузере, вы должны увидеть следующее:

через GIPHY

Если вам нужен более длительный эффект набора текста, вы можете настроить продолжительность анимации и количество шагов, указанных в шаги() функция.

Оживление курсора

Эффект пишущей машинки почти завершен, однако не хватает одной функции — мигающего курсора. Напомним, что в последнем блоке кода для текста была установлена ​​правая граница, которая служила курсором. Вы можете добавить анимацию к этому курсору, используя @keyframes правило тоже.

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

После определения пользовательской анимации добавьте имя анимации в анимация недвижимость на текст class и установите продолжительность 0,6 секунды.

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

Теперь, когда вы запустите код, вы должны увидеть мигающий курсор.

через GIPHY

Сила функций CSS

Функции CSS произвели революцию в способах создания веб-сайтов, предложив вам как разработчику замечательный набор инструментов. Эти универсальные функции обеспечивают динамическое моделирование и взаимодействие, которые когда-то были доступны только для сложных языков сценариев.

От манипуляций с цветом до адаптивных макетов, анимации и творческих преобразований — функции CSS расширили возможности веб-дизайна. С такими функциями, как Calc() для гибких вычислений, Linear-gradient() для потрясающих фонов и Translate() для захватывающих анимаций, вы можете создать визуально привлекательную и увлекательную для пользователя опыты.