Анимация набора текста - TypeIt
TypeIt - универсальный инструмент JavaScript для создания эффектов пишущей машинки (эффект набора в терминале). Благодаря простой конфигурации, он позволяет вводить одну или несколько строк, которые разрывают другие строки, удаляют и заменяют друг друга, и даже обрабатывает строки, содержащие сложный HTML. Есть поддержка ввода в HTML формах.
Документация здесь
Репозиторий здесь
Установка
2. Подключаем библиотеку в проект:
<script src="typeit.min.js"></script>
3. Создаём текстовый блок, к которому применим нужную анимацию:
<div id="element"></div>
4. Скрипт:
new TypeIt('#element', { strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!" }).go(); // Или так let myTypeItInstance = new TypeIt("#element", { strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!" }); myTypeItInstance.go();
Определение строк
Вы можете определить строки для ввода разными способами.
Вариант #1: Определить их в своих параметрах как строку или массив строк.
new TypeIt("#element", { strings: "TypeIt is the most versatile JavaScript typewriter effect utility on the planet!" }).go(); //Массив строк new TypeIt("#element", { strings: ["This will be typed!", "And this will be typed too."] }).go();
Вариант #2: Жестко прописать в целевом элементе. Это хороший вариант для SEO.
<span id="element">This will be typed!", "And this will be typed too.</span> new TypeIt("#element").go();
Вариант #3: Определить их с помощью методов экземпляра. Чтобы определить свои строки вручную, используйте метод экземпляра type()
и настройте эффект еще больше, комбинируя их с другими методами.
new TypeIt("#element") .type("TypeIt is the most versatile JavaScript typewriter effect utility on the planet!") .pause(1000) .type("Plus a little more.") .go();
Код примера
<!DOCTYPE html> <html> <head> <title>typeitjs</title> </head> <body> <p id="element"></p> <script src="typeit.min.js"></script> <script> new TypeIt("#sample_typeit", { strings: "TypeIt is the most versatile JavaScript typewriter effect <br>utility on the planet!", waitUntilVisible: true ).go(); </script> </body> </html>