Флеболог » Набор текста для проверки зрения

 

Слепой метод печати Википедия

Автор: sexelolli 15.01.2015, 14:25

кардиолог на дом уфа
demosourse

Typed.js - это jQuery плагин, который воспроизводит анимацию набора символов на экране. Укажите в настройках любые строки и смотрите как они появятся на экране.

Установка

Для установки и использования плагина подключите библиотеки.

<script src="jquery.js"></script> <script src="typed.js"></script> <script> $(function(){ $(".element").typed({ strings: ["First sentence.", "Second sentence."], typeSpeed: 0 }); }); </script> ... <span class="element"></span>

Нужен мерцающий курсор? Добавьте следующий CSS.

.typed-cursor{ opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-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; } }

Перевод курсора на новую строку

Для переноса курсора на новую строку воспользуйтесь \n. Только перед этим не забудьте задать свойство white-space. Пример:

<span id="typed" style="white-space:pre"></span> ... $(".typed").typed({ strings: ["Sentence with a\nline break."] });

Паузы

Вы можете создать временные задержки между печатью слов:

<script> $(function(){ $(".element").typed({ // Задержка 1000 миллисекунд после слова "First" strings: ["First ^1000 sentence.", "Second sentence."] }); }); </script>

Детальная настройка

<script> $(function(){ $(".element").typed({ strings: ["First sentence.", "Second sentence."], typeSpeed: 0, // скорость набора backSpeed: 0, // скорость удаления текста startDelay: 0, // изначальная задержка перед набором backDelay: 500, // пауза перед удалением текста loop: false, // повтор (true или false) loopCount: false, // число повтором, false = бесконечно showCursor: true, attr: null, // атрибут callback: function(){ } // функция, которая вызовется после окончания работы плагина }); }); </script>

Источник: http://ruseller.com/lessons.php?rub=32&id=2148


Теги к новости - Набор текста для проверки зрения

Раздел: Геморрой - Набор текста для проверки зрения