====== Анімаційні ефекти ======
Анімація завжди служила для того, щоб вдихнути душу в сторінки вашого сайту, зробити його більш живим і зрозумілим для користувача. Навіть примітивна анімація, найпростіші гіфки і зображення, що змінюються часто використовуються в декоративних цілях. Вони можуть розважити користувача і просто виділити ваш сайт серед конкурентів.
Коли справа доходить до анімації вашого веб-сайту, варіанти безмежні, але це не означає, що всі елементи вашого веб-сайту повинні обертатися та стрибати по головній сторінці. Вам потрібно знайти баланс між кількістю анімації, яку ви використовуєте на веб-сторінці свого сайту.
===== Різні типи анімації для використання у веб-дизайні =====
Коли справа доходить до анімації у веб-дизайні, існує два основних принципи її використання: **функціональність** і **естетика**. Функціональна анімація допомагає користувачам подорожувати сайтом і робить обробку інформації візуально приємною. Естетична анімація, з іншого боку, не має жодної іншої функції, крім того, щоб зробити сайт більш привабливим.
==== Анімація завантаження ====
Найчастіше використовується в дизайні веб-сайтів для функціональності. Анімацію завантаження можна побачити в основному, коли сайт відкривається вперше, і для завантаження потрібно деякий час. Її можна використовувати для завантаження відео, завантаження файлів або будь-яких інших подібних процесів на вашому веб-сайті.
{{ :subjects:basic:informatika:web:kitchen_load_animation.gif?nolink }}
{{ :subjects:basic:informatika:web:circular-water-fill-loading-animation.gif?nolink |}}
{{ :subjects:basic:informatika:web:dribbble_1.gif?nolink&375 |}}
Для ефективного використання анімація завантаження повинна відповідати стилю сайту. Наприклад, якщо ваш веб-сайт барвистий, ви можете мати анімацію завантаження, як м’яч, що стрибає, а для сайтів, пов’язаних із їжею, це може бути пончик або каструля.
==== Анімація прокрутки ====
Майже кожен веб-сайт в Інтернеті має вбудовану анімацію прокручування, і це стає звичним. Але це не означає, що ви не повинні використовувати цю дивовижну функцію у своєму веб-дизайні. Якщо ви хочете використовувати цю анімацію, то додайте елементи, які рухаються поступово разом із прокручуванням.
{{ :subjects:basic:informatika:web:scrolling-animations.gif?nolink }}
==== Анімація при наведенні ====
Ця анімація є поширеним функціональним типом, який ви обов’язково повинні використовувати у своїх блоках сайту із закликом до дії та в меню.
{{ :subjects:basic:informatika:web:design-shack-animation-copy.gif?nolink }}
==== Анімація галереї зображень ====
Для відвідувачів сайту є зручним переглядати галерею зображень не клацаючи для зміни зображень. Це чудове використання анімації, щоб привернути увагу відвідувачів до товарів. Ви можете додати каталог товарів або слайд-шоу, відображаючи зображення по одному або одразу дкількох.
{{ :subjects:basic:informatika:web:you-and-i-graphics-animation-copy.gif?nolink }}
==== Анімований фон ====
Однією з наймодніших анімацій сьогодні є використання високоякісної графіки у фоновому режимі. Це вдосконалення галереї зображень, де анімація вбудована як фон вашого веб-сайту для всієї сторінки або окремих розділів. Ці анімації можуть покращити індивідуальність вашого сайту.
Це беззвучне фонове відео або переходи між зображеннями.
{{ :subjects:basic:informatika:web:femme-fatal-design-animation-copy.gif?nolink }}
===== Найкращі інструменти, які допоможуть вам оживити дизайн веб-сайту =====
Тепер у вас є уявлення про різні типи анімації, які можна використовувати у вашому веб-дизайні. Давайте розглянемо програмне забезпечення та інструменти, які допоможуть вам оживити веб-сайт і зробити його більш привабливим.
Ось деякі з популярних інструментів, які використовують веб-дизайнери для створення чудової анімації:
==== CSS анімації: ====
Для створення анімації засобами CSS, використовуйте властивість ''animation'' разом з правилом ''@keyframes'', яке встановлює візуальні ефекти для анімації.
Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.
Порядок також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.
**Анімація — це набір ключових кадрів, або кейфреймів, які зберігаються в CSS**
@keyframes animation-test {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
Розберемося, що тут відбувається. Ключове слово @keyframes означає саму анімацію. Потім йде ім'я анімації, в нашому випадку — animation-test. У фігурних дужках міститься список кейфреймів. Ми використовуємо початковий кадр 0% і кінцевий 100% (їх також можна записати як from і to).
Погляньте на код нижче. Анімацію можна задати і таким чином:
@keyframes animation-test {
from {
width: 0;
}
25% {
width: 75px;
}
75% {
width: 150px;
}
to {
width: 100%;
}
}
Пам'ятайте, якщо початковий або кінцевий кадри не вказані, браузер визначить їх автоматично, ніби до них не була застосована анімація.
Під’єднати анімацію до елемента можна так:
element-selector {
animation-name: your-animation-name;
animation-duration: 2.5s;
}
Властивість animation-name задає ім'я для анімації @keyframes. Правило animation-duration Правило animation-duration задає тривалість анімації в секундах (1s, 30s, .5s) або мілісекундах (600ms, 2500ms).
==== JavaScript анімація ====
JavaScript пропонує більшу гнучкість щодо анімації та переходів, оскільки за допомогою цього ви також можете переміщувати елементи DOM на веб-сторінці.
За допомогою JavaScript-анімацій можна робити речі, які не можна реалізувати CSS.
Анімація реалізується через послідовність кадрів, кожен із яких трохи змінює HTML/CSS-властивості.
Нижче наведено деякі з найбільш часто використовуваних сторонніх бібліотек JavaScript для створення анімації для дизайну веб-сайту:
* ScrollMagic
* Velocity.js
* Anime.js
* Vivus
* Mo.js
* GreenSock (GSAP)
==== Canvas ====
Canvas (англ. canvas — «полотно») — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.
Щоб відобразити ''