Эффект печатающегося текста на сайте
Сегодня вы узнаете, как сделать на сайте анимацию печатающегося текста и реализуем мы этот симпатичный эффект с помощью jQuery плагина – typed.js.
Применяя эффект печатающегося текста, мы однозначно, хотим направить внимание пользователя на суть или смысл этой фразы. Это значит, что эта фраза не может быть не о чем, постарайтесь очень лаконично передать в ней самый главный посыл пользователю. Например, это может быть призыв к действию подписаться или перейти по ссылке.
Подключение плагина typed.js
Официальный сайт плагина typed.js
https://github.com/mattboldt/typed.js/
Здесь вы можете увидеть пример, что будет происходить с текстом. Сначала вслед за курсором текст автоматически набирается, а затем так же, стирается и снова набирается, столько раз, сколько у нас заготовлено фраз. В настройках плагина предусмотрено много разных опций.
Мы не будем скачивать плагин, а воспользуемся CDN ссылкой, пропишем внизу страницы, перед закрывающимся тегом body, ссылку на сам плагин и на библиотеку jQuery.
<script src=" https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML разметка
Мы создадим два div-а, в одном из них с классом .box мы поместим растянутый на всю ширину и высоту страницы фон-картинку. А в другом div-е с классом .top-text, внутри первого div-а, будет лежать текст.
В заголовке h1 будет находиться статичный текст – "Не ходите дети в Африку гулять!". Внутри пустого тега span, текст будет печататься – "В Африке гориллы. В Африке большие. Злые крокодилы."
<div class="box">
<div class="top-text">
<h1>Не ходите дети в Африку гулять!<br>
<span id="typing"></span>
</h1>
</div>
</div>
CSS код
Для этого шуточного отрывка детского стишка использовался рукописный гугловский шрифт Neucha, который можно подключить в самом верху файла стилей.
@import url('https://fonts.googleapis.com/css?family=Neucha');
Я не буду подробно комментировать и писать здесь все свойства стилей, а остановлюсь лишь на самых сложных, ниже вы увидите полностью код на Codepen.
Подложкой для текста служит большая фотография, которая полностью заполнила блок с классом .box, благодаря свойству:
background-size: cover;
Сам же текст держится посередине, поскольку он находится в ячейке CSS-таблицы, такого его естественное состояние. Именно по этой причине мы применили к блоку с классом .box:
display: table;
Внутри блочной таблицы, находится ячейка с нашим текстом, класс .top-text:
display: table-cell;
Для затемнения фотографии, используется псевдоэлемент before. Затемнение происходит через альфа-канал в формате цвета – rgba. Поверх фотографии накладывается псевдо-блок черного цвета с нужной прозрачностью, таким образом фото жирафа слегка затемняется. Это нужно, для того, чтобы лучше выделить белый текст на фоне фотографии.
Как сделать мигающий курсор
Было бы неплохо, рядом с печатыющимся текстом, поставить анимированный курсор, это сразу привлечет внимание пользователя и даст понять, что здесь будет что-то происходить.
Для этого предусмотрен класс .typed-cursor, его мы и пропишем стили по своему усмотрению. Эффект мигающего курсора устанавливается с помощью свойства.
animation: blink 0.7s infinite;
Так же у нас будет три ключевых кадра, в которых смена прозрачности opacity, создаст эффект затухания и появления курсора.
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
JS код
В нашем примере печатывающийся текст будет выводиться в теге span, для которого мы прописали id="#typing". Обратите внимание, что текст должен выводиться обязательно внутри строчного тега, если вместо строчного тега вы примените блочный тег, то курсор каждый раз будет начинать печатать с новой строки.
Для того, чтобы текст сам печатался, необходимо прописать нужные праметры для #typing, которые мы будем брать из настроек плагина.
В теге span, построчно будут выведен следующий текст:
$("#typing").typed({
strings: [" В Африке гориллы.", " В Африке большие.", " Злые крокодилы."],
Как этот текст будет выводиться, регулируется параметрами. Такими, как скорость вывода текста.
typeSpeed: 70,
Задержка на старте, перед началом печатания текста.
startDelay: 2500,
Задержка, перед началом удаления текста.
backSpeed: 1500,
Установка счетчика, сколько раз будет повторяться эффект печатания текста. Возможные значения, от нуля - false до бесконечности - infiniti. Мы хотим, чтобы эффект сработал два раза.
loop: true,
loopCount: 2,
Выводимый тип контента, не простой текст, а с учетом html тегов.
contentType: 'html',
Создание такого замечательного эффекта не отнимает много времени, а результат весьма оригинален и незаслуженно редко применяется в веб-разработке. Пользуйтесь на здоровье!
Весь код примера
See the Pen Animation text with typed.js by porsake (@porsake) on CodePen.
-
Создано 07.09.2018 10:53:14
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.