Вращение текста JQuery

И снова привет!) CSS3 открыл новый мир для дизайнеров и разработчиков, он дал возможность делать страницы более интерактивными, а также размещать контент в динамической форме. Но как ни крути, пока без JQuery приходится туго и временами, небольшим плагином или скриптом можно сделать все гораздо быстрее и проще.

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

HTML

Качаем библиотеку jQuery(здесь или подключаем напрямую) и плагин Adjector.js(здесь) и стили(здесь), затем подключаем все эти файлы:

<link rel="stylesheet" type="text/css" href="css/adjector.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/adjector.js"></script>

Рассмотрим структуру на примере четвертого варианта. 

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

<div id="heading" class="contain">
<span class="adject">LOREM</span> 
<span class="adject">ipsum1|ipsum2|ipsum3|ipsum4|ipsum5</span>
</div>

А так как в этом случае у нас есть еще и описание каждого из названий (подпунктов), то необходимо также в другом блоке через сепаратор вставить описание:

<div id="sub" class="contain">
<span class="adject">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua.
| Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam.
| But I must explain to you how all this mistaken idea of denouncing pleasure and praising 
pain was born.
| At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 
voluptatum deleniti atque corrupti quos dolores.
| On the other hand, we denounce with righteous indignation and dislike men who are so beguiled 
and demoralized by the charms of pleasure.
</span>
</div>

Javascript

В случае с вариантом 4 настройки плагина будут выглядеть следующий образом:

<script type="text/javascript">
	  		$(document).ready(function(){
      			$(".contain .adject").adjector({
        			sep: "|",
        			stay: 400,
        			trans: 850,
        			arm: 0
      			});
			});
		</script>

Рассмотрим что это за свойства:

• sep — это разделитель (сепаратор), который мы ставим между изменяющимся текстом.
• stay — этот параметр задается в милисекундах и показывает задержку между сменой текста.
• trans — скорость вращения (время самой анимации), задается в милисекундах.
• arm — ось вращения. Если ноль, то будет происходить вращение на месте. К примеру Вариант 3, там данный параметр равен "-400".

Итог

Где же Вы пожете использовать этот скрипт? Первое, что приходит в голову — это выводить анонсы новостей где-то в сайдбаре, также можно рекламировать свои уроки, рецепты, статьи. Вот и все! Желаю всем удачи в изучении такого интересного инструмента как JQuey!)