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

Крім самої jquery є ще маса корисних та невідомих плагінів написаних на цій та інших яваскриптових бібліотеках.

У цій статті я не хочу робити докладний опис роботи з кожним із плагінів. Сьогодні буде лише огляд того, що зараз можна використовувати для розробки своїх тем сайтів.

Перший пагін jquery анімує текст. Усього 5 видів анімації.

Для роботи з плагінною анімацією тексту необхідні:

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

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

Відмінна анімація і все за допомогою CSS3. Анімуємо завантаження на сторінці.

Завантажити можна тут:

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

jAni – простий плагін для JQuery який дозволяє пожвавити фонові зображення. Плагін переважно альтернатива GIF-анімації, але з кількома перевагами та недоліками.

По перше, завжди краще використовувати анімовані GIF зображення, оскільки цей формат підтримується всіма браузерами без коду JavaScript або додаткової розмітки, але формату GIF є і великий недолік як зображення. Анімований GIF дозволяє працювати тільки з 256 квітами, і ви не можете керувати анімацією, так як хочеться вам. jAni завантажує довгі вертикальні зображення, додає їх у фон блоку та змінює положення фону з тією швидкістю, з якою ви налаштуєте, що дає вам більший контроль над анімацією.

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

Довгий час точилися суперечки як правильно робити анімацію на сайті і раніше не було кращої альтернативи ніж спалах. З появою JavaScript бібліотек та нових можливостей CSS3 все кардинально змінилося. Тепер не треба підключати третю сторону у вигляді Flash Player. Завжди шукав як робиться така анімація в преміум шаблонах, з постійним прокручуванням фону та переміщення об'єкта по сайту. Розглянемо чудовий плагін jQuery.spritely.

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

Паралакс

Рік тому закінчив університет та робив для них сайт, у шапці сайту я використав ефект 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

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