Создание анимации печатающего текста на сайте с помощью Javascript

В данной статье рассмотрим создание такого популярного эффекта на сайтах, как печатающий текст. Очень красивый скрипт, который создает эффект печатающей машинки.

Анимация написания текста на JavaScript

Итак, сам скрипт очень простой и установить его не составит труда.Для начало стоит скачать и подключить библиотеки jQery и самого скрипта и сделать их подключение после открывающего тега head.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/typed.min.js" type="text/javascript"></script>

Сам javascript код для создания данного эффекта выглядит следующим образом:

<script>
  $(function(){
      $(".classtext").typed({
        strings: ["Печатающий текст"],
        typeSpeed: 0
      });
  });
</script>

В данном коде указывается наименование используемого класса в тексте, в данном случае это «classtext». Пишется сам текст, которому необходимо придать анимацию печати, указывается скорость его появления.
Данный скрипт вставляется в тег head, после этого в теге body прописывается тег, к которому будет привязан  class, используемый в скрипте.
Этот скрипт хорошо работает во всех современных браузерах. Также с помощью стилей можно сделать так, что сам текст печатался бы иным способом не слева-направо,а например начиная с центра. Для этого достаточно к используемому классу в стилях дописать свойство «text-align:center»

Вы можете оставить комментарий, или Трекбэк с вашего сайта.

ОЦЕНИТЕ ПОЛЕЗНОСТЬ СТАТЬИ

Оценка: 4,20 ( голосов: 5)
Loading...Loading...

ПОДЕЛИТЬСЯ ССЫЛКОЙ

Комментариев к записи: 1

  1. MySeoService:

    При помощи jQuery и CSS создается эффект плавного появления текста, который Вы только что наблюдали.

Оставить комментарий

Return to Top ▲Return to Top ▲