Как легко анимировать текст

Здарова! Сегодня вы узнаете как легко анимировать текст. Иногда нужно сделать чтобы текст не просто появился на странице, а постепенно, плавно или наоборот быстро, но только после полной загрузки страницы. Возможно нужно просто выделить какую-либо часть текста, чтобы пользователь обратил внимание. В уроке присутствует несколько видов анимации, поэтому выбирайте наиболее понравившийся.

HTML
Необходимо скачать библиотеку jQuery и плагин jquery.flipping_text.js, а затем подключить их:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flipping_text.js"></script>

Делаем верстку для текста, который анимируем (для разных примеров она незначительно отличается, но в исходниках все есть):

<div class="main">
	<div class="container">
		<h2 class="my_text">Lorem ipsum dolor sit amet</h2>
		<h3 class="my_text">consectetur adipiscing elit</h3>
	</div>
</div>

jQuery
Чтобы использовать плагин необходимо его инициализировать, добавив на страницу следующий код:

 

$(".my_text").flipping_text({
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
});

Плагин самостоятельно считает количество символов. Рассмотрим, что представляет каждое из этих свойств:

tickerTime — задается в миллисекундах. Определяет насколько быстро будут появляться буквы.
customRandomChar — данное свойство позволяет задать произвольный набор символов, которые будут показываться перед появлением каждого символа текста. Посмотреть можноо в Примере 4.
tickerCount — определяет сколько символов нужно прокрутить перед тем как показать нужный символ текста.
opacityEffect — возможность сделать символ, который только появился нечетким(серым). Принимает значения «false» и «true».
resetOnChange — позволяет сохранить количество символов, которые появились при клике на другую вкладку. Может принимать значения «false» и «true».

В итоге, за такой короткий промежуток времени Вы получили интересный эффект для текста, который можно использовать на продающей странице, чтобы привлечь внимание пользователя :)