Simple Text Rotator – спецэффекты для вращающегося текста

31 июля 2015 Антон Кулешов 1773 0

В большинстве случаев, когда вы ведете обычный блог, то манипуляции с текстом крайне нежелательны, так как они отвлекают от чтения. Но если вы что-то продаёте или хотите выделить, к примеру, слово, чтобы ваш посетитель обратил внимание в первую очередь на его, то тут есть масса вариантов как это сделать. Банально придумать интересное оформление, воспользовавшись 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.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Аутентификация через Twitter

21 января 2016 Антон Кулешов

Продолжаем тему аутентификации через социальные сети и сегодня поговорим о Twitter.

Ленивая загрузка картинок, используя jQuery

2 апреля 2016 Антон Кулешов

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин lazy load.

Оригинальный lightbox на jQuery

15 марта 2016 Антон Кулешов

Приветствую друзья, я уже давно нечего не добавлял по теме «увеличение картинок» или, как принято называть эффект - lightbox. Решений сейчас в интернете можно найти просто массу, и каждое по-своему применимо, так как они были написаны для конкретных задач. Сегодня я же хочу выделить один jQuery плагин из общей массы, названный simplezoom. Перевод названия, которого – простое увеличение, что соответствует самому скрипту.