—»     —»   5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты
  Раздел: Скрипты и коды   Нет комментариев  

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты



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

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

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты

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

<a href="#" id="example" data-hover="Magazine">CoolWebmasters</a>

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

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

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

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

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты

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

Плагин основан на том же принципе, и соответствующим образом отображает текст. Применение довольно простое. Просто примените эффект к тексту посредством jQuery-селектора:

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

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

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

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты

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

Опять же, плагин может быть задан к любому текстовому элементу:

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

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

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

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты

В старые добрые времена бегущая новостная строка присутствовала практически на каждом сайте. Даже на многих крупных новостных сайтах была представлена бегущая строка. Именно этого и позволит добиться плагин 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: чистая гиперкреативность

5 jQuery-плагинов, которые помогут вам вдохнуть жизнь в ваши тексты

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

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

В зависимости от выбранного эффекта, вам будут предлагаться различные опции для оформления вашего текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 4933   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930