Версия: 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."] }); |
лучший тайпер
Помогите!!! Не догоняю + на официальном сайте typed не написано, а только показано как сделано!!! Проблема вот в чем: Как они сделали что при нажатии на кнопку start скрипт активируется, а при dectroy отключается?
Woah! I have to thank you for the efforts you’ve put in penning this blog.
I really hope to see the same high-grade content from you in the future as well.
In truth, your creative writing abilities has encouraged me to get my very own website now
very good article very good layout, thank you very much for your website,This is my first time go to see at here and i am genuinely pleassant
to read, I learned a lot and gained more knowledge.I was seeking this certain information for a long time.Keep writing!!!😉