Привет, всем хорошего дня и вечера! Решил выпустить свой первый текстовый урок, надеюсь вам он понравится. Урок про очень интересный плагин, который будет дополнять ваш сайт красивым дизайном и его с легкостью можно изменить под вкус каждого. С помощью него можно наблюдать интересный эффект автоматического печатания и стирания текста, будет служить отличным дополнением сайта. Плагин очень прост в подключении и настройке, поэтому его используют большинство сайтов.
1. шаг
Первым делом чтобы плагин заработал, нам нужно подключить 2 скрипта:
Для этого заходим на официальный сайт плагина и скачиваем оттуда архив (скачиваем отсюда : 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,