Анімаційні ефекти на вебсторінках

Опрацювати теоретичний матеріал:

Анімація є одним із трендів у дизайні веб-інтерфейсів, вона вже давно стала невід’ємною частиною кожного сайта.

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

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

Перший варіант (найпростіший), який ми розглянемо, - анімовані об’єкти.

Це окремі зображення і об’єкти, які показуються користувачеві. Наприклад, курсор, що рухається, плаваюча кнопка «вгору», кнопки заклику до дії, зміна кольору тощо.

Другий варіант - анімовані зображення (наприклад, рекламні банери на сайті). Вони можуть вести на внутрішні сторінки, блог, перенаправляти відвідувача на інший сайт. Ще один приклад - слайд-шоу з фотографій. Анімаційні ефекти можна створювати як виключно засобами каскадних таблиць стилів, так і за допомогою JavaScript. CSS-анімація робить можливим анімацію переходів (transitions) з однієї конфігурації CSS-стилю до іншої. Анімація складаються з двох компонентів, а саме: зі стилю, котрий описує CSS-анімацію, та набору ключових кадрів (keyframes), які задають початковий і кінцевий стани стилю анімації (також є можливість задання точок проміжного стану).

Існує не менше сотні різноманітних плагінів та бібліотек для роботи з CSS-анімацією.

Розглянемо лише декілька з них:

• Animate.css - це фундаментальна бібліотека анімацій, сумісних з усіма браузерами та відповідних для безлічі завдань. Вона містить всі - від класичних підскакувань до останніх новинок і унікальних ефектів - і здатна задовольнити потреби практично будь-якого проекту.

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

• CSS-Animate - це простий майданчик для написання робочого коду для будь-якої анімації. Достатньо задати ім’я, клас, властивості анімації і фрейму, і можна керувати часовою послідовністю і додавати маркери. Одне слово, налаштувати все необхідне для створення стандартної анімації, заснованої на ключовому кадрі.

Є вісім властивостей animation (в алфавітному порядку):

1. animation-delay – задає затримку перед початком анімації, в секундах

2. animation-direction – вказує на те, чи повинна анімація відтворюватися в зворотному або черговому циклах (reverse або alternate)

3. animation-duration – визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклу

4. animation-fill-mode – стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримка

5. animation-iteration-count – задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)

6. animation-name – визначає ім’я @keyframes анімації

7. animation-play-state – вказує на те, чи запущена анімація або припинена (running або paused)

8. animation-timing-function – визначає криву швидкості анімації
   

Поради:

• Помірність: Надмірне використання анімації може відволікати або навіть дратувати користувачів.

• Продуктивність: Складні анімації можуть уповільнювати роботу сайту, тому важливо оптимізувати їх, особливо для мобільних пристроїв. CSS-анімації зазвичай більш продуктивні, ніж JS-анімації.

• Доступність: Необхідно враховувати користувачів із підвищеною чутливістю до руху. Стандарти веб-доступності (WCAG) рекомендують надавати можливість вимкнення або зменшення анімації.

• Відповідність цілям: Анімація має слугувати конкретній меті (наприклад, пояснювати функціональність, привертати увагу до ключових елементів), а не просто бути "для краси".

Перегляньте відео-урок:

Виконайте інтерактивну вправу.

Скрін виконаної вправи прикріпіть до цього завдання.

Практичне завдання:

Створіть вебсторінку «Анімаційні ефекти».

Вимоги:

• Додати заголовок сторінки.

• Створити кнопку, яка змінює колір або розмір при наведенні.

  Середовище: http://htmlbook.in.ua/htmledit.html

Зразок:

Завдання:

Надрукуйте по 3 переваги та недоліки використання анімацій на вебсторінках.