Эффект тайпинга текста, или печати, добавляет интересный визуальный элемент на ваш сайт и может улучшить пользовательский опыт. В этой статье мы рассмотрим, как создать этот эффект с использованием HTML, CSS и JavaScript.
Шаг 1: Создание HTML-структуры
Для начала создадим простую HTML-структуру, которая будет содержать элемент, в котором будет происходить эффект тайпинга текста.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тайпинг эффект</title>
</head>
<body>
<h1><span id="typed-text"></span><span class="cursor">|</span></h1>
</body>
</html>
Здесь мы создали элемент span с идентификатором typed-text, который будет содержать наш текст с эффектом печати. Рядом с ним находится еще один элемент span с классом cursor, который будет отображать мигающий курсор.
Шаг 2: Применение CSS-стилей
Теперь добавим немного стилей с помощью CSS, чтобы сделать наш эффект более привлекательным.
body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
.cursor {
font-weight: bold;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Здесь мы задаем шрифт для текста и выравниваем его по центру. Для мигающего курсора мы используем анимацию blink, которая меняет прозрачность с 1 (непрозрачный) до 0 (прозрачный) и обратно.
Шаг 3: Добавление JavaScript-кода
Наконец, добавим JavaScript-код для создания эффекта печати текста.
const textToType = "Привет, мир! 😉";
const typingSpeed = 100;
const typedTextElement = document.getElementById("typed-text");
let currentIndex = 0;
function typeText() {
if (currentIndex < textToType.length) {
typedTextElement.textContent += textToType.charAt(currentIndex);
currentIndex++;
setTimeout(typeText, typingSpeed);
}
}
typeText();
В этом коде мы определяем текст, который должен быть набран, и скорость набора текста. Затем мы находим элемент typed-text и начинаем набирать текст по одному символу с использованием функции typeText, которая вызывает сама себя с задержкой, определенной в typingSpeed.
Теперь у вас есть простой, но эффективный эффект тайпинга текста на вашем сайте! 😊
Не забудьте проверить школу веб-разработки, если хотите углубить свои знания и навыки в этой области.
Добавить комментарий