02 Июн 2023
2 мин
94

Как создать эффект тайпинга текста на сайте

Узнайте, как создать эффект тайпинга текста на вашем сайте с помощью HTML, CSS и JavaScript, делая его более интерактивным.

Содержание

Эффект тайпинга текста, или печати, добавляет интересный визуальный элемент на ваш сайт и может улучшить пользовательский опыт. В этой статье мы рассмотрим, как создать этот эффект с использованием 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 &lt; textToType.length) {
        typedTextElement.textContent += textToType.charAt(currentIndex);
        currentIndex++;
        setTimeout(typeText, typingSpeed);
    }
}

typeText();

В этом коде мы определяем текст, который должен быть набран, и скорость набора текста. Затем мы находим элемент typed-text и начинаем набирать текст по одному символу с использованием функции typeText, которая вызывает сама себя с задержкой, определенной в typingSpeed.

Теперь у вас есть простой, но эффективный эффект тайпинга текста на вашем сайте! 😊

Не забудьте проверить школу веб-разработки, если хотите углубить свои знания и навыки в этой области.

Добавить комментарий