Техно-мир

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

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

Наш первый плагин изменяет текст при наведении в очень интересной манере. Исходный текст обозначается как элемент А. Альтернативный текст привязывается в качестве атрибута данных:

CoolWebmasters

Плагин также должен быть обозначен при помощи параметра ID к элементу А:

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

Здесь есть несколько опций для изменения скорости и типа анимации. Буквы можно заменить как все сразу, так и каждую по очереди. Sliding Letters основывается на jQuery, Easing.js и Lettering.js, и все эти ресурсы включены в архив для скачивания.

02. Shuffle Letter Effects: отдать должное классическим табло отправления и прибытия

Shuffle Letter Effects сильно напоминает нам всевозможные табло отправления и прибытия, которые можно видеть на железнодорожных станциях или в аэропорту. Буквы перекручиваются до тех пор, пока не будет найдена нужная, и реализовано это при помощи привлекательного эффекта вращения.Плагин основан на том же принципе, и соответствующим образом отображает текст. Применение довольно простое. Просто примените эффект к тексту посредством jQuery-селектора:

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

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

03. textillate.js: различные текстовые анимации на CSS3

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

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

Вдобавок к типу эффекта, вы также можете указать продолжительность эффекта, либо вовсе зациклить анимацию.

04. News Ticker: классика

В старые добрые времена бегущая новостная строка присутствовала практически на каждом сайте. Даже на многих крупных новостных сайтах была представлена бегущая строка. Именно этого и позволит добиться плагин News Ticker. 90-е возвращаются! Все, что вам нужно сделать, это создать список ваших новостных сообщений, обозначенных как UL и LI. UL будет содержать ID, который затем будет использовать плагином:

$("example").ticker();

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

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

05. Text Animation: чистая гиперкреативность

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

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

В зависимости от выбранного эффекта, вам будут предлагаться различные опции для оформления вашего текста.