В большинстве случаев, когда вы ведете обычный блог, то манипуляции с текстом крайне нежелательны, так как они отвлекают от чтения. Но если вы что-то продаёте или хотите выделить, к примеру, слово, чтобы ваш посетитель обратил внимание в первую очередь на его, то тут есть масса вариантов как это сделать. Банально придумать интересное оформление, воспользовавшись CSS стилями, но в сегодняшней статье я предлагаю придать этому явлению чуть больше динамики.
Речь пойдет о решении, написанном на jQuery под названием Simple Text Rotator. Перевод названия плагина даёт нам явное представление, что мы будем придавать динамику тексту за счет вращения его. Думаю, если вы владелец сайта визитки или лендинга, где важно сделать заметные заголовки, то это решение может пригодиться.
И так давайте приступим к установке Simple Text Rotator. Первым делом необходимо подключить библиотеку jQuery и скрипты плагина:
<link href="simpletextrotator.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="simpleTextRotator.js" type="text/javascript"></script>
Теперь добавим HTML разметку:
<h1>Super <span class="rotate">Simple, Customizable, Easy</span> Text Rotator with Style</h1>
Текст у нас будет не просто вращаться, но при этом ещё и заменяться на другой. Работает это очень просто: в содержимое span с классом rotate нужно поместить текстовку через запетую и вызвать сам плагин:
$(".rotate").textrotator({
animation: "flip",
speed: 1000
});
Теперь давайте рассмотрим, какие у нас есть настройки:
- animation – вид анимации которая будет осуществляться при вращении или смене текста, по умолчанию установлено dissolve. Другие возможные варианты: dissolve, flip, flipUp, flipCube, flipCubeUP, fade и spin;
- separator – символ являющимся разделителем текстовок, его можно установить каким вы захотите;
- speed – тут всё просто - скорость анимации.
Как видите, воспользовавшись таким простым решением, вы сможете сделать ваши заголовки и текста более заметными и интересными. В разделе «демо» вы сможете более наглядно рассмотреть возможности Simple Text Rotator.