Часто, работая с темами WordPress, я натыкаюсь на анимацию, созданную при помощи JavaScript библиотек. Самая популярная, о которой думаю слышало большинство тех, кто заходит на сайт это jquery. Библиотека отличная но слишком популярная чтобы писать о ней еще один из сотен тысяч раз. Перекладываю эту затею на тех читателей которые ведут свои блоги. Можете предлагать свои ссылки в комментариях.

Кроме самой jquery есть еще масса полезных и неизвестных плагинов написанных на этой и других яваскриптовых библиотеках.

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

Первый пагин jquery анимирует текст. Всего 5 видов анимации.

Для работы с плагинном анимации текста необходимы:

Библиотеки: jQuery , jQuery UI.
Поддерживаемые браузеры: Firefox 3.x+, Google Chrome2.x+, IE8+, Safari5.x+

Пример анимации текста и сам плагин в архиве:

Отличная анимация и все при помощи CSS3. Анимируем загрузку на странице.

Скачать можно тут:

jAni — альтернативная анимация картинок в jpeg формате.

jAni — простой плагин для JQuery который позволяет оживить фоновые изображения. Плагин в основном альтернатива GIF-анимации, но с несколькими преимуществами и недостатками.

Во-первых, всегда лучше использовать анимированные GIF изображения, так как этот формат поддерживается всеми браузерами без кода JavaScript или дополнительной разметки, но  формата GIF есть и крупный недостаток в качестве изображения. Анимированный GIF позволяет работать только с 256 цветами, и вы не можете управлять анимацией так как хочется вам. jAni загружает длинные вертикальные изображения, добавляет их в фон блока и меняет положение фона с той скоростью с которой вы настроите, что дает вам больший контроль над анимацией.

Анимация с постоянной прокруткой jquery

Долгое время шли споры как правильно делать анимацию на сайте и раньше небыло лучшей альтернативы чем flash. С появлением JavaScript библиотек и новых возможностей CSS3 все кардинально изменилось. Теперь не надо подключать третью сторону в виде flash player. Всегда искал как делается анимация такого рода в премиум шаблонах, с постоянной прокруткой фона и перемещение объекта по сайту. Рассмотрим отличный плагин jQuery.spritely.

Для использования библиотеки и просмотра демонстрации работы плагина перейдите на официальный сайт плагина.

Parallax

Год назад закончил университет и делал для них сайт, в шапке сайта я использовал эффект JParallax. На то время считал что вещь крутая и ничего подобного долго еще не придумают. Недавно на всем известном Хабрахабре нашел статью об этом прекрасном плагине с примерами его использования и разными его реализациями в виде других плагинов. Рассмотрим все что выросло из паралакса и сплошь и рядом используются в премиум шаблонах.

Плагины для создания параллакс-эффектов:

• jQuery Parallax Image Slider
• jQuery Image Parallax by Steve Fenton
• crolling Parallax: A jQuery Plugin by John Raasch
• Scrollorama by John Polacek
• Scrolldeck by John Polacek
• jParallax
• Stellar.js by Mark Dalgleish
• jQuery Scroll Path by Joel Besada
• Curtain.js by Victor Coulon
• Plax by Cameron McEfee

Уроки по работе с паралаксом (англ.)

•  One page website, vertical parallax
• Build a parallax scrolling website interface with jQuery and CSS
• jQuery Parallax Tutorial – Animated Header Background
• Building a parallax scrolling storytelling framework
• Parallax Slider with jQuery

Примеры использования Parallax

• springsummer
• bagigia
• acuterays
• fundacionrafaelpombo
• activatedrinks

Для тех кто скажут что статья сухая напомню что это всего лишь заметка для себя и возможно она кому-то еще понравиться. Если у вас есть чем дополнить, пишите в комментариях.