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

31 июля 2015 Антон Кулешов 1772 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
Читайте далее

Социальные кнопки поделиться – пишем сами

3 мая 2015 Антон Кулешов

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

И еще 30 CSS эффектов при наведении

5 ноября 2015 Антон Кулешов

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на изображение. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.

«Легкая упоротость» глитч эффект

1 апреля 2015 ti1schweiger

«А у тебя коленки сзади грязные!» - согласитесь, звучит неубедительно в реалиях сегодняшнего времени, тем более, когда реальное общение все больше заменяет виртуальное. Как же шутить на 1 апреля? – Да очень просто! Хотите разыграть пользователей своего ресурса? – Используйте глитч эффект. Кто еще не в теме, поясню, глитч эффект – это эффект сломанного монитора, который уже не раз умудрились уронить и у которого серьезно барахлят сведение и вертикальная синхронизация.