Версия: 1.1.4
Краткое описание
Плагин Typed.js для jQuery позволяет эмулировать эффект печатной машинки.
Подключение
Для работы необходимо подключить jQuery.js и Typed.js
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/typed.js" type="text/javascript"></script> |
Также, для эффекта мигающего курсора нужно добавить немного CSS-кода
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<style> .typed-cursor{ opacity: 1; font-weight: 100; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } </style> |
Использование
Для базового использования достаточно указать элемент со строка и элемент для вывода текста при инициализации Typed.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> (function ($) { $(document).ready(function () { $(".typed").typed({ stringsElement: $('.typed-strings'), }); }); })(jQuery); </script> <div class="typed-strings"> <span>Typed.js is a <strong>jQuery</strong> plugin.</span> <p>It <em>types</em> out sentences.</p> <p>And then deletes them.</p> <p>Try it out!</p> </div> <span class="typed"></span> |
Расширенная настройка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
$(".element").typed({ // Список фраз для вывода strings: ["First sentence.", "Second sentence."], // Альтернативный вариант указания фраз для вывода, с помощью html-элемента (каждая строка должна быть обернута в <p>) stringsElement: null, // Скорость печати текста typeSpeed: 0, // Задержка перед началом печати текста startDelay: 0, // Скорость стирания текста backSpeed: 0, // Перемещать строки shuffle: false, // Задержка перед стиранием текста backDelay: 500, // Зациклить loop: false, // Количество повторений, false — бесконечно loopCount: false, // Показать курсор showCursor: true, // Символ курсора cursorChar: "|", // Атрибут элемента, в котором будет меняться текст (null — текст элемента) attr: null, // Формат: html или text contentType: 'html', // Функция будет вызвана, после завершения печати текста callback: function () {}, // Функция будет вызвана перед началом печати каждой строки preStringTyped: function () {}, // Функция будет вызвана для каждой напечатанной строки onStringTyped: function () {}, // Функция будет вызвана при сбросе — $(".element").typed('reset') resetCallback: function () {} }); //Пауза между печатью слов $(".element").typed({ // Пауза 1000 мс после печати слолва "First" strings: ["First ^1000 sentence.", "Second sentence."] }); |
лучший тайпер