<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

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

Подписавшись по 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):

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