Анимация набора текста

Для привлечения внимания, без использования цвета и мигания можно использовать эффект набора текста- анимированный текст. Обычный текст, который набирается в реальном времени, непроизвольно заставит посетителя следить за появлением новых букв. психологически оправданный эффект для удержания внимания посетителя. Этот эффект также имеет смысл использовать, если место ограничено, но требуется выдать длинное сообщение. Это может быть несколько фраз, следующих одна за другой. Также, этот эффект можно использовать в учебных целях. Или, к примеру, для выдачи бегущей строки новостей. Эффект мигающего курсора, также придает сообщению эффект динамики. Смотрите пример такой строки. Впечатляет ... Теперь подробно опишем, как установить такую строку на ваш сайт. Для начала вам понадобится стилевой файл, обеспечивающий мигание курсора и .т.п.

 /* code for animated blinking cursor */
 .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; }
 }

Затем, необходимо подключить файл скрипта:
<script src="typed.js" type="text/javascript"></script> Сам файл можно скачать здесь. здесь. На страницу надо разместить код скрипта, в котором следует прописать свой набор строк для отображения на странице.

 $(function(){
 $("#typed").typed({
 strings: ["Пример анимации набора текста.", 
"Можно использовать как ленту новостей.", 
"Это удерживает внимание посетителя.", 
"Можно использовать в учебных целях.", 
"Такой вариант лучше, чем просто бегущая строка.",
"На странице не должно быть больше одной строки.", 
"Предложите вариант, где это можно использовать ...."],
 typeSpeed: 30,
 backDelay: 500,
 loop: false,
 // defaults to false for infinite loop
 loopCount: false,
 callback: function(){ foo(); },
 resetCallback: function() { newTyped(); }
 });
 $(".reset").click(function(){
 $("#typed").typed('reset');
 });
 });
 function newTyped(){ /* A new typed object */ }
 function foo(){ console.log("Callback"); } 

И последний шаг - разместить на странице контейнер, в котором будет отображаться набираемый анимированный текст.
<div class="type-wrap"> <span id="typed" style="white-space:pre;"></span> </div> Вы можете управлять скоростью отображения, паузой перед стиранием. Также можно применить свой стиль для контейнера, в котором отображается текст. Ну и конечно же, все это будет работать, если подключена библиотека:
<script src=".../jquery/1.9.1/jquery.min.js"> </script>