6 плагинов JQuery чтобы вдохнуть жизнь в ваши тексты ( Анимация текста)

6 плагинов JQuery чтобы вдохнуть жизнь в ваши тексты ( Анимация текста)

Текст это основная часть любого сайта, практически первое что видит посетитель. Тем не менее иногда надо выделить некую часть, скажем сделать более очевидный заголовок. Так вот, набор плагинов jQuery, предоставляет нам возможности по разному анимировать текст. Сегодня расскажу о 6 таких плагинах.

Sliding Letters: Изменение текста при наведении

Анимация текста с помощью плагина Sliding Letters
Первый плагин изменяет текст при наведении на него курсора мыши.
У плагина есть несколько настроек — изменение скорости и тип анимации. Буквы могут меняться все одновременно или по очереди. Работа плагина основывается на easing.js и lettering.js каждая из которых уже встроена в пакет загрузки.

Shuffle Letter Effects:

Анимирование текста с помощью плагина jquery Shuffle Letter Effects
Эффекты перемешивания букв напоминает информативные доски вокзалов и аэропортов. Буквы перемешиваются пока нужный символ не будет найден, это создаёт отличный flip эффект.
Применить данный плагин довольно просто. Достаточно применить эффект с помощью jQuery селектора.

$("#example").shuffleLetters();

Кстати говоря на сайте разработчика есть не только возможность скачать плагин и посмотреть демо, но и короткая история о том, как он его создавал.

textillate.js: разнообразные css3 анимации текста

Создание анимации текста при помощи textillate.js
Демо на сайте разработки позволяет опробовать все доступные эффекты, благо у этого плагина их достаточно много. С помощью данного плагина можно создавать довольно интересные анимации.
Использовать его достаточно просто:

$("#example").textillate({
  in: {
    effect: "rollIn"
  }
});

News Ticker: Классика

Разработка эффекта анимации текста с news ticker
В старые добрые времена, в веб-дизайне бегущие строки новостей были повсюду. Даже на больших новостных сайтах. И это именно то, чего можно достичь используя данный плагин. Анимация текста 90-x годов. Все, что вам нужно сделать, это создать список ваших новостных сообщений, размеченных как ul li . ul осуществляет роль ID который затем обрабатывается с помощью плагина:

$("example").ticker();

News Ticker способен отображать RSS-канал. Все, что вам нужно сделать, это загрузить канал через Ajax:

 $("example").ticker({
  htmlFeed: false,
  ajaxFeed: true,
  feedUrl: "/rss.xml",
  feedType: "xml"
});

Text Animation:

Анимированный текст jquery text animation plugin
Если однообразие это не то к чему вы стремитесь, то этот плагин явно вам понравится. Анимация текста с помощью данного плагина точно обратит на себя внимание. Буквы танцуют и загораются на экране. Эффекты достаточно яркие но легки в реализации:

$("#example").textAnimation({
  mode: "roll"
});

В зависимости от выбранной анимации текста, в дополнение есть ещё несколько конфигураций направленные на то, что бы вдохнуть жизнь в ваши тексты.

Colors animation:

Мигающий текст при помощи плагина jquery color animation
C помощью этого плагина можно реализовать мигающий текст. Точнее будет сказать сделать анимацию любого свойства css.
Список свойств, анимацию которых можно реализовать:

  • color
  • backgroundColor
  • borderColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • outlineColor
comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter