jQuery TypeIt

Script type jQuery: скрипт который пишет за вас

· jQuery и JavaScript, Библиотеки и Блог · 2 мин чтения

В этой записи, я хотел бы поделиться замечательным скриптом, который «пишет текст за вас». 

Вы можете посмотреть демо, чтобы вам было понятнее о чем идет речь.

А так же можете скачать скрипт и приступить к его установке. Инструкция к установке написана ниже.

Установка

  1. Для начала вам нужно установить jQuery + подключить скрипт, который позволяет в конец вашего сайт перед </body>.
    <link rel="stylesheet" href="dist/typeit.min.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="dist/typeit.min.js"></script>
  2. После чего создать пустой элемент, в котором скрипт будет писать.
    <div id="words"></div>
  3. Далее вызывает сам контейнер (в нашем случае #words) — куда нужно писать и вписывает что туда нужно написать, а так же с какой скоростью это писать.
  4. $('#words').typeIt({
      whatToType: ['jQuery плагин, который пишет за вас.'], // строка которая будет писаться в элемент #words
      typeSpeed: 100 // скоро печатания 
    });
  5. А теперь немного о стандартных настройках самого плагина.
    $('.typeit-box').typeIt({
    
      // Здесь можно указать что вы хотите написать
      whatToType:'Это стандартная строка, которую вам нужно заменить на вашу личную фразу.',
    
      // Скорость печатания (миллисекунды)
      typeSpeed: 200,
    
      // Сделать темп печатанbя не стандартным - true | false
      lifeLike: false,
    
      // Показывать/Скрыть курсор - true | false
      showCursor: true,
    
      // true - если вы хотите, чтобы несколько строк шли друг за другом
      breakLines: true,
    
      // Отдых между (в миллисекундах) прежде чем писать новую строчку  
      breakDelay: 750,
    
      // Сколько нужно времени, чтобы плагин начал писать после загрузки страницы
      startDelay: 250,
    
      // Вы хотите, чтобы плагин продолжал печатать ваше слово или предложение бесконечно
      loop: false,
    
      // Сколько должно пройти времени прежде чем строка повторит печатание (в случае если loop равен true)  
      loopDelay: 750
      
    });

     

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