Печатающий текст Typed.js

Привет, всем хорошего дня и вечера! Решил выпустить свой первый текстовый урок, надеюсь вам он понравится. Урок про очень интересный плагин, который будет дополнять ваш сайт красивым дизайном и его с легкостью можно изменить под вкус каждого. С помощью него можно наблюдать интересный эффект автоматического печатания и стирания текста, будет служить отличным дополнением сайта. Плагин очень прост в подключении и настройке, поэтому его используют большинство сайтов.

1. шаг

Первым делом чтобы плагин заработал, нам нужно подключить 2 скрипта:

1. typed.min.js
2. demos.js

Для этого заходим на официальный сайт плагина и скачиваем оттуда архив (скачиваем отсюда : www.mattboldt.com/demos/typed-js ) разавирихруем папочку находим папку lib берем оттуда файл typed.min.js далее открываем папку assets и находим файл demos.js. Так идем далее нам нужны были эти два файла мы их нашли и скопировали к себе в проект и подключили, - отлично!
 
2. шаг

Чтобы инициализировать скрипт, делаем такую структуру в внутри html документа:

<div id="typed-strings">пишем текст 
       <div id="typed-strings">
               <p>Простота — залог надежности.</p>
        </div>
</div>

3.шаг 

Для того, чтобы курсор начинался с новой строки, прописываем следующее:

<span id="typed" style="white-space:pre"></span> $(".typed").typed({ strings: ["Sentence with anline break."] });

Код полностью:

 <div id="typed-strings">
        <p>Простота — залог надежности.</p>
</div>
<span id="typed" style="white-space:pre"></span>
$(".typed").typed({ strings: ["Sentence with anline break."] });

4.шаг 

Чтобы курсор мигал и казался более эффектным в стилях прописываем следующее и, соответственно, подключаем его: 

.typed-cursor{
    font-size:46px;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

5. шаг

Для того, чтобы изменить скорость печатания или удаления текста, мы изменяем файл demos.js 

typeSpeed: 30, 
backSpeed: 30,  
startDelay: 1000,