Анимация печати текста для сайта | Typed.js

Приветствую, друзья, сегодняшняя тема — анимация печати текста для сайта. Использовать для этого мы будем небольшую, но очень удобную библиотеку — Typed.js. В ней реализован необходимый для нашей задачи функционал с множеством настроек. Плюсом к этому идут небольшой размер библиотеки, быстрота работы и возможность легко подключить её, используя CDN. Я буду делать именно так, но если вы хотите подключить её более привычным способом — вот ссылка на Github разработчика.

Делаем анимацию печати текста

Для начала, как и всегда, необходимо подключить саму библиотеку. Я писал, что буду подключать через CDN, так что все что мне нужно — просто вставить данный код в HTML файл. Если вы хотите скачать библиотеку — вам сюда.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

После чего необходимо создать span в том месте, где вы хотите показывать анимацию, и задать ему id. Так же создаем дополнительный id (у меня это «typed-strings»). В него мы поместим тот текст, который нужно анимировать. Каждую отдельную строку для анимации помещаем в отдельный span. Важно! Вы можете поместить текст не обязательно в span. Но если вы будете помещать текст, например, в <p>, то вам необходимо прописать для этого элемента display: inline в css, иначе вы обнаружить неприятный баг (указатель текста будет на строку ниже самого текста)

<div id="typed-strings">
    <span>Строка для печати 1</span>
    <span>Пример 2 - Пример строки</span>
</div>

<div class="text-typing">
    <span id="typed"></span>
</div>

Переходим в JavaScript. Тут код достаточно простой, указываем id, в который будем помещать анимацию и указываем некоторые параметры (скорость печати, скорость удаление, бесконечность)

let typed = new Typed('#typed', { // Тут id того блока, в которм будет анимация
    stringsElement: '#typed-strings', // Тут id блока из которого берем строки для анимации
    typeSpeed: 100, // Скорость печати
    startDelay: 500, // Задержка перед стартом анимации
    backSpeed: 50, // Скорость удаления
    loop: true // Указываем, повторять ли анимацию
});

Если же вы хотите больше опций для кастомизации, вот список всех опций с указанием того, что делает каждая из них.

$(".element").typed({
    typeSpeed: 0, // Скорость печати
    backSpeed: 0, // Скорость удаления
    startDelay: 0, // Задержка перед стартом анимации
    backDelay: 500, // Пауза перед удалением 
    loop: false, // Повтор (true или false)
    loopCount: false, // Число повторов, false = бесконечно
    showCursor: true, // Отображение курсора
    attr: null, // Атрибут
    callback: function(){ } // Функция вызываемая после окончания работы плагина
});

Результат

Если вы все делали правильно, вы получите вот такую анимацию печати текста в вашем проекте:

Анимация печати текста для сайта

Спасибо, что прочитали! Если у вас остались вопросы — смело задавайте их в комментарии, постараюсь помочь всем)

Так же буду очень благодарен, если вы ознакомитесь с другими моими статьями:

1. Анимация при скролле в несколько строк кода
2. Параллакс эффект для фона на чистом CSS

Семенюк Назарий

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Оцените статью

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 4.3 / 5. Количество оценок: 12

Оценок пока нет. Поставьте оценку первым.