Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Анімаційні ефекти jQuery: 7-етапне пояснення

by
Read Time:15 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Завдяки додаванню капельки анімаційних ефектів ви можете прикрасити скучний інтерфейс. У цьому посібнику ви дізнаєтеся, як це правильно зробити за допомогою jQuery.


Від автора

Анімація – концепція, що часто викликає у людей розбіжності. Одні клянуться в її корисності, інші яро запевняють у тому, що нею зловживають. Тим не менше, при вдалому використанні завдяки анімаційним ефектам користувацький інтерфейс часто прикрашується та стає акуратнішим та зрозумілим для користувачів. У цьому посібнику ми почнемо з деяких основ jQuery, потім розберемося з тим, як створити нашу першу анімацію, а потім перейдемо до створення ефекту і, нарешті, розроблення дещо, що можна буде використовувати у реальному світі розробки.

Зацікавило? Давайте прямо зараз і візьмемося! Будь ласка, зверніть особливу увагу на те, що, оскільки цей посібник призначений для аудіторії веб-розробників-початківців, я, певно, буду трохи докладно пояснювати деякі моменти. Потерпіть трошки. Якщо вам цікаво, то ознайомтеся з першою частиною демоверсії простого ефекту, який будемо сьогодні створювати.


Шаг 1: Основи jQuery

jQuery – бібліотека на JavaScript, ціль якої – полегшити вам, розробнику, процес створення кращих, крутіших, інтерактивних веб-сайтів та користувальницьких інтерфейсів завдяки мінімально можливій кількості рядків.

Типовий рядок коду виглядає наступним чином:

Давайте розглянемо кожну частину:

  • $ – скорочена форма запису для об'єкта jquery. Користуйтеся jquery, якщо ви використовуєте інший фреймворк на той самій сторінці, як наприклад jquery(DOM Element).something();
  • (DOM-елемент) – елемент, над яким ви хочете виконати якісь дії. Ця частина є прихованою зброєю jQuery. Ви можете використовувати селектори CSS для отримання елемента. Тут може бути використана будь-яка форма оголошення, що працює у CSS-документі. ID, класи, псевдокласи, все що завгодно.
  • something() – дія, яку ви хочете виконати над отриманим елементом. Це може бути все що завгодно: від приховання елемента до виконання запиту AJAX або призначення обробка подій.

У цьому посібнику ми скористаємося лише можливостями, пов'язаними з анімаційними ефектами.


Крок 2: Використання вбудованих ефектів

jQuery надає вам безліч вбудованих методів, які ви можете одразу використовувати. Серед них є методи для показу/приховання елементів у деяких варіаціях, включаючи проявлення зображення завдяки ковзному руху (* поступово збільшуючи їх висоту. Тут і надалі примітка перекладача) та поступове проявлення та зникнення елемента. Також вам надається декілька методів-перемикачів, за допомогою яких змінюється видимість елемента.

Перед тим як розглянути кожний з цих елементів, погляньте на загальний формат їх виклику:

Беручи за приклад загальні принципи jQuery, спершу ми отримуємо потрібний елемент за допомогою селекторів CSS. Далі ми просто викликаємо будь-який з вбудованих методів.

Хоча більшість методі можуть бути викликані без передачі аргументів, часто вам могло би бути потрібно налаштувати їх функціональні можливості. Кожний метод приймає щонайменше параметри speed та callback.

За допомогою speed задається тривалість анімації у секундах. Ви можете передати рядкові значення, включаючи "slow", "normal" чи "fast", або ж ви можете бути точніше та вказати час у мілісекундах.

callback – функція, яка виконується одразу після завершення анімації. Ви можете використовувати її для виконання чого завгодно: непомітно виконати запит AJAX, оновити іншу частину користувальницького інтерфейсу тощо. Це обмежується вашою фантазією.

Нижче наведено список методів, що поставляються з jQuery:

  • show/hide – методи для показу або приховання елемента. Метод приймає в якості параметрів speed та callback.
  • toggle – метод, за допомогою якого змінюється видимість елемента в залежності від поточного стану елемента, тобто, якщо елемент приховано, він відображується, і навпаки. Використовує методи show або hide.
  • slideDown/slideUp – говорять самі за себе. За допомогою них змінюється висота елемента для створення ефекту проявлення або приховання елемента завдяки ковзному руху.
  • slideToggle – те саме, що й метод toggle, за виключенням того, що він використовує методи slideDown/slideUp для проявлення або приховання елементів.
  • fadeIn/fadeOut – за допомогою них змінюється прозорість елемента, що нас цікавить, для створення ефекту поступового проявлення/зникнення.
  • fadeTo – за допомогою нього змінюється прозорість елемента згідно з переданим значенням. Ясно, що він приймає додатковий параметр opacity, причому при передачі 0 елемент буде повністю прозорим, а при передачі 1 – повністю непрозорим.

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

Наприклад, якщо би ви хотіли змінити видимість тільки елементів списку з класом effect, то ваш код виглядав би наступним чином:

По-простому, функція toggle перевіряє значення переданого до неї виразу, і якщо це true, то воно змінюється на протилежне. Інакше воно залишається тим самим. У переданому нами тут виразі перевіряється, чи є в елемента певний клас.


Крок 3: Створення нашого власного анімаційного ефекту

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

Для створення власного анімаційного ефекту ви використовуєте метод animate. Погляньте.

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

Параметри speed та callback використовуються з тією самою метою, що й у попередніх методах. Саме параметр, в якості якого виступає об'єкт, що містить ряд пар ключ-значення, робить цей метод унікальним. Ви передаєте всі властивості, які хочете занімувати, разом з їх кінцевими значеннями. Наприклад, припустимо, що ви хочете занімувати ширину елемента до 90% поточного значення; вам потрібно було би зробити щось на зразок наступного:

За допомогою фрагменту коду вище ширину елемента буде змінено до 90% її поточного значення, а потім користувачеві буде виведено повідомлення про те, що анімацію завершено.

Зверніть увагу на те, що ви можете анімувати не тільки розміри. Ви можете анімувати цілий ряд властивостей, включаючи прозорість, відступи, поля, границі, розмір шрифту. Вищезгаданий метод також доволі гнучкий стосовно одиниць вимірювання. Підходять і пікселі, і em (* одиниця довжини відносно розміру шрифту елемента), і проценти. Так що дещо настільки ж заплутане, як нижче, підійде. Просто не буде виглядати цілісно.

При визначення властивості, що складається з більш ніж одного слова, візьміть на замітку, що його потрібно записувати за допомогою «верблюжої» нотації (* від англ. camel case). Це сильно відрізняється від звичайного синтаксису CSS, так що зверніть на це особливу увагу. Слід писати borderTop, а не border-top.

Зверніть увагу: jQuery дозволяє анімувати тільки властивості, у якості значень яких використовуються числа. Це означає, що можуть бути використані тільки головні властивості, а всі пов'язані з кольором властивості не підходять. Але не турбуйтеся. Завдяки деяким можливостям jQuery UI (* бібліотека готових компонентів для користувальницького інтерфейсу, розроблена на основі jQuery) ми будемо анімувати кольори дуже скоро.


Крок 4: Підганяємо ефект

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

Найпростіший спосіб вирішення цієї проблеми полягає у використанні методу stop одразу перед початком анімації. Фактично у результаті цього очищується черга, і анімація продовжить виконуватися належним чином. Наприклад, ваш звичайний код виглядав би наступним чином:

При використанні методу stop для запобігання нагромадження анімаційних ефектів ваш новий код виглядав би наступним чином:

Нічого складного, чи не так? Проте при використанні цього методу у дійсності є невелика проблема. Через швидку взаємодію з інтерфейсом не буде відбуватися нагромадження, проте анімації будуть виконуватися не до кінця. Якщо ви хочете остаточно вирішити цю проблему, то вам потрібно буде звернутися до плаґіна на зразок hoverFlow.


Крок 5: Робимо ефекти більш реалістичними завдяки додаванню ефекту згладжування

(* від англ. easing – згладжування; зміна анімації з часом). Якщо ви хотіли би зробити ефекти реалістичнішими, то вам потрібен був би додатковий контроль над інтенсивністю, з якою вони виконуються. Для цього і потрібен ефект згладжування. По суті за допомогою згладжування контролюється прискорення та сповільнення анімації з часом.

У якості варіанта згладжування за налаштуванням використовується вбудований у jQuery "swing" (* коливання; анімація виконується з низькою інтенсивністю на початку / в кінці, але з високою – у середині). Плаґін, розроблений Робертом Пеннерсом, для додання ефекту згладжування дозволяє вам скористатися рядом його варіантів. Ознайомтеся з розділом демоверсії для демонстрації ефекту згладжування, щоб ознайомитися з кожним із варіантів цього ефекту.

Проте є застереження з приводу використання спеціального варіанту згладжування: ви можете їм скористатися тільки тоді, коли задаєте власний анімаційний ефект, тобто з методом animate. Одразу після підключення плаґіна для додання ефекту згладжування та для того, щоб скористатися спеціальним варіантом аргументу, вам потрібно лише передати його в якості аргументу наступним чином:

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


Крок 6: Вдосконалення ефектів за допомогою jQuery UI

У результаті переходу на jQuery UI ми отримуємо набір дуже потрібних можливостей. Насправді вам не потрібна вся бібліотека, щоб скористатися додатковими можливостями. Вам всього-на-всього потрібен файл з ключовими ефектами для отримання цих можливостей. Не UI Сore, а тільки файл компонента Effects Core, вага якого відносно невелика та складає 10 Кбайт.

Важливі можливості, які має jQuery UI, включають до себе анімування кольору, вибір варіанту згладжування та перехід між класами.

Якщо пам'ятаєте, я раніше згадав, що при використанні головної бібліотеки jQuery, ви можете анімувати тільки властивості, в якості значень яких виступають числа. У випадку використання jQuery UI таких обмежень нема. Ви можете легко занімувати колір фону елемента, колір його границі тощо. Також, для реалізації цих розширених можливостей просто розширюється функціонал головної функції animate, а не створюється спеціальна функція. Це означає, що якщо до вашого документу підключено файл з ключовими ефектами, то ви можете використовувати звичайний метод animate для виконання всієї неприємної роботи за вас.

Наприклад, якщо би ви хотіли занімувати колір границі елемента при переміщенні миші поверх нього, то ваш код виглядав би наступним чином:

Завдяки переходам між класами здійснюється анімація класів. При використанні головної бібліотеки у випадку видалення та подальшого додання класу, завдяки якому змінюється зовнішній вигляд елемента, зміна класів відбулася би моментально. Якщо у вашому документі підключено бібліотеку jQuery UI, то у вас з'являється можливість передачі додаткових параметрів для встановлення швидкості анімації, варіанта згладжування та функції зворотного виклику. Подібно до попередніх можливостей, ця працює на основі існуючого API jQuery, завдяки чому полегшується процес переходу (* з однієї бібліотеки на іншу).

Остання можливість, яку нам надає jQuery UI, – інтегровані функції згладжування. Раніше вам потрібно було використовувати додатковий плаґін для додання цієї можливості, проте тепер вона надається у складі бібліотеки, так що вам не потрібно буде більше турбуватися про це.


Крок 7: Створення нашого першого ефекту, який можна використовувати у реальному світі розробки

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

Уявіть наступне: вам потрібно додати зображення, і коли користувач переміщує поверх нього курсор, то всередині зображення з'являються два розділи. В одному відображається заголовок, а в іншому – стислий опис зображення. Впевнений, що ви знайдете для реалізації цього буквально незліченну кількість плаґінів, проте сьогодні ми створимо його з нуля. Обіцяю, що це не так складно, як здається. У дійсності, це можна зробити дуже просто та швидко. Поїхали.


Код HTML

Для початку нам потрібен міцний фундамент у вигляді HTML-розмітки, на основі якої будемо створювати плаґін.

Для реалізації цього ефекту нам потрібно буде спочатку визначитися зі структурою кожного елементу. Кожний елемент обгорнутий до div з класом item. Всередині div є три елементи: саме зображення та два елементи div, в яких містяться заголовок та опис.

Решта частин виглядає доволі звичайно та говорить сама за себе. Ми починаємо з підключення бібліотеки jQuery, бібліотеки jQuery UI та нашого файлу з нашим власним кодом JS. Зверніть особливу увагу на те, що мені потрібна була тільки частина jQuery UI з ключовими ефектами, так що я завантажив тільки її. Якщо хочете додати більше ефектів, то вам потрібно буде самостійно вибрати потрібні компоненти. Ви можете підібрати потрібні компоненти та завантажити їх набір тут.

Нижче показано, як виглядає наша сторінка після завершення цього етапу.

Tutorial ImageTutorial ImageTutorial Image

Код CSS

Тут вам варто звернути увагу на декілька моментів. Кожний елемент має властивість position, у якості значення якої задано relative (* якщо у батька в якості значення position використовується fixed, relative або absolute, то відлік координат здійснюється від краю батьківського елемента), завдяки чому для елементів усередині нього можна легко задати позицію. Також у якості значення властивості overflow елемента встановлено hidden, завдяки чому ми можемо приховати заголовок та опис за межами елемента, якщо вони не потрібні.

В якості значення властивості position заголовка та опису задано absolute, завдяки чому їх можна точно відпозиціонувати всередині елемента з класом item. В якості значення властивості top заголовка встановлено значення 0, так що він розташовується вгорі, і в якості значення властивості bottom опису встановлено 0, завдяки чому він розташовується прямо внизу.

Решта правил CSS доволі стандартна та головним чином стосується типографської розмітки тексту, незначного позиціонування та візуальних ефектів. Нічого виняткового.

Нижче показано, як виглядає наша сторінка після завершення цього етапу.

Tutorial ImageTutorial ImageTutorial Image

Магія JavaScript, обумовлена jQuery

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

Логіка цього ефекту доволі проста. Оскільки для елементів задано абсолютне позиціонування, то ми спочатку розміщуємо елементи за межами вікна перегляду. При переміщенні курсору поверх зображень нам просто потрібно перемістити ці елементи до їх вихідних положень, тобто верхню та нижню частини зображення.

Для початку ми переміщуємо заголовок та опис за межи видимості. Ми робимо це за допомогою JavaScript, а не CSS, через конкретну причину. Навіть якщо JS відключено на стороні клієнта, то веб-інтерфейс має доволі добру відмовостійкість (* це стратегія розробки, при якій ваш веб-інтерфейс першочергово призначений для перегляду в сучасних браузерах, тоді як в старих браузерах він відображатиметься з обмеженим набором можливостей, але, як мінімум, з базовим функціоналом. Якщо ми говорим про JavaScript, то це означає, що не весь функціонал може бути доступним, в силу відсутності підтримки окремих JS можливостей. Або ж, сайт функціонуватиме і за умови виключеного JS, але лише у базовому режимі). Заголовок та опис як і раніше лежать поверх зображення, і воно виглядає таким же чином, як і у стані, коли поверх нього переміщено курсор. Якщо би ми замість JavaScript скористалися CSS для приховання заголовка та опису і JS було би відключено, то вони були би повністю приховані і, відповідно, некорисні. Я вирішив використовувати JS для виконання неприємної роботи в інтересах прогресивного покращення (* передбачає, що розробка веб-інтерфейсу відбувається поетапно, від простого до складного. На кожному з етапів ми отримуємо завершений веб-інтерфейс, що з кожним етапом стає ще кращим, ще зручнішим. В результаті виходить ресурс, що працює у всіх браузерах).

Ми з самого початку прив'язали наш власний код до функції hover для кожного елемента з класом item. Це дозволяє нам зробити цей обробник доволі універсальним та придатним для повторного використання. Для додання цього функціоналу іншим елементам потрібно всього-на-всього додати їм клас item. Перша функція використовується для обробки події hover, а друга – для обробки події unhover.

В області видимості функції this знаходиться посилання на елемент, що згенерував подію. Ми використовуємо метод animate для зміни потрібних значень. Також ми додаємо невеликий ефект згладжування, щоб зробити ефект трохи привабливішим. При переміщенні курсору за межі елемента ми просто повертаємо властивостям початкові значення.

Ефект доповнюється тим, що при наведенні курсору поверх контейнерів для заголовка та опису їх колір повільно змінюється завдяки можливостям jQuery UI.

На цьому, власне, все. Це не забрало багато часу, чи не так? Непогано, як для невеликого скрипта, який ще менше, враховуючи те, скільки рядків коду було поміщено тільки у фігурні дужки.


Завершення


От і все. У цьому посібнику було надано пояснення того, як створити анімаційні ефекти за допомогою jQuery, а також наведено приклад з реального світу розробки вдалого застосування отриманих знань. Сподіваюся, що вам було цікаво працювати з цим посібником та воно стало вам у пригоді. За бажанням можете повторно використати цей код де завгодно у ваших проектах та приєднатися до обговорення тут, якщо у вас виникнуть труднощі.

Хочете побажати щось приємне? Маєте якісь критичні зауваження? Перейдіть до розділу з коментарями та залиште мені коментар. Вдалого вам програмування!

  • Підпишіться на нас на Twitter або на Nettuts+ RSS Feed, щоб бути в курсі про найкращі посібники з веб-розробки. Готово.

Напишіть посібник для Plus

Чи знали ви, що можете отримати до $600 за написання посібника і/або скрінкасту (* цифровий файл, що містить послідовність зображень з екрана монітора (screen output), як правило з текстовими та аудіо-підказками) для нас? Нам потрібні вичерпні та грамотно написані посібники з HTML,CSS,PHP та JavaScript. Якщо ви маєте відповідні вміння, то зв'яжіться з Jeffrey за адресою nettuts@tutsplus.com.

Будь ласка, пам'ятайте, що фактична винагорода буде залежати від якості кінцевого посібника та скрінкасту.

Write a PLUS tutorial
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.