Эффект печати текста на клавиатуре | |
Представляем скрипт, который оживляет текст, выводя его на экран так, будто он печатается. Каждый символ появляется с небольшой задержкой, создавая эффект "живого" ввода. Это отличный способ привлечь внимание к важным сообщениям или сделать взаимодействие с вашим сайтом более динамичным. Функциональные особенности: • Регулируемая скорость печати: Вы можете настроить скорость вывода с помощью параметра 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
Поделиться в социальных сетях
Материал разместил