ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффект печати текста на клавиатуре

Эффект печати текста на клавиатуре

Эффект печати текста на клавиатуре
Представляем скрипт, который оживляет текст, выводя его на экран так, будто он печатается. Каждый символ появляется с небольшой задержкой, создавая эффект "живого" ввода. Это отличный способ привлечь внимание к важным сообщениям или сделать взаимодействие с вашим сайтом более динамичным.

Функциональные особенности:

Регулируемая скорость печати:
Вы можете настроить скорость вывода с помощью параметра delay.
Легкая настройка текста:
Просто укажите нужный текст в переменной text.
Возможность остановки:
Пользователь может остановить процесс печати, кликнув на крестик.
Интеллектуальное сохранение:
Скрипт запоминает свое состояние (запущен или остановлен) в localStorage. Если вы остановили его, он не запустится снова при следующем визите на страницу.

Пример использования:

Где хотите вывести блок со своим "печатающимся" текстом, прописываем следующий код HTML:
Код
<div id="output"></div>

Ниже подключаем JavaScript с функцией набора текста:
Код
<script>
const text = "Привет! Это пример текста, который будет выводиться с эффектом печатания.";
const delay = 50; // задержка между символами в миллисекундах
const output = document.getElementById('output');
const startTime = Date.now();
let index = 0;
let timer; // переменная для хранения таймера

function printCharacter() {
if (index < text.length && (Date.now() - startTime) < duration * 1000) {
output.innerHTML += textindex];
index++;
timer = setTimeout(printCharacter, delay); // задержка между символами
} else {
// Показываем ссылку с крестиком после завершения текста
showCloseLink();
}
}

function showCloseLink() {
const closeLink = document.createElement('a');
closeLink.href = '#';
closeLink.textContent = ' ❌';
closeLink.style.marginLeft = '5px';
closeLink.addEventListener('click', function(event) {
event.preventDefault();
localStorage.setItem('script-closed', 'true'); // запоминаем, что скрипт был закрыт
output.style.display = 'none'; // скрываем вывод скрипта
});
output.appendChild(closeLink);
}

// Проверяем, был ли скрипт уже закрыт
if (localStorage.getItem('script-closed') === 'true') {
output.style.display = 'none'; // скрываем вывод скрипта, если он был закрыт ранее
} else {
printCharacter(); // запускаем вывод текста, если скрипт еще не был закрыт
}
</script>

P.S.: в качестве демонстрации, процесс вывода текста на экран будет сопровождаться задержкой в 50 миллисекунд между отображением каждого символа - меняем это значение под себя.

Источник: htmlstart.ucoz.net

24 Августа 2025 Просмотров: 57

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

avatar