<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

Помимо самих уроков Вы так же получаете и множество упражнений. По сути, Вы создадите свои собственные 20 небольших проектов, благодаря чему у Вас появится и практика, и портфолио.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Эффект печатающегося текста на сайте

Эффект печатающегося текста на сайте

Сегодня вы узнаете, как сделать на сайте анимацию печатающегося текста и реализуем мы этот симпатичный эффект с помощью 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.