Анимация набора текста - 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>