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

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

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

Величезне спасибі http://www.webdesignerdepot.com та, як завжди, обов'язково подивіться минулі добірки з красивими сайтами:

www.noiretrenoir.com

Чудовий сайт, який використовує круту анімацію для більшого зв'язку з аудиторією. Особливо сподобалося, як з початку сайт був чорно білий, а за ступенем завантаження він набирає кольоровість, в обсязі все дуже креативно і красиво зроблено.

barcampomaha.org

Цілком чудовий і різнокольоровий сайт, який наповнений різними анімованими монстрами та іноземцями.

www.azahran.com

www.quechua.com

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

Parallax.js

Сайт використовується в місці демо сторінки, яка демонструє роботу скрипта Parallax.js. Ну що сказати, все виглядає дуже ефектно!

www.buffalowildwings.com

Сайт простий, але затягує гри. Як завжди тут використовується химерна анімація.

goodtwin.co

Цей сайт використовує як красиві ілюстраціїтак і гарну анімаціюдо них. Все разом це виглядає дуже круто.

www.intacto10years.com

Можливо я Вам вже показував даний сайт, але не згадати його я не міг:) Подивіться ще просто на дуже якісну роботу.

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

www.ipolecat.com

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

www.octaveoctave.com

Цікавий сайт з незвичайними картинкамита малюнками, плюс анімація. Тобто - незвичайно, але стильно.

www.milkable.me

Тут використовуються просто дуже красиві ілюстрації плюс ефект паралаксу до них, дуже сучасно. Відмінний ефект паралаксу на головній з ілюстраціями. І, звичайно ж, дуже круте меню по сайту.

www.mitchlana.com

Сайт талановитого ілюстратора, який використовує анімацію, щоб трохи пожвавити ресурс.

Немає ніякої «фішки» у створенні масштабної анімації. Хоча ні, є: треба витратити чимало часу на її оптимізацію та тестування. Так після кількох років експериментів, постійно упираючись у межі продуктивності браузерів, ми вивели серію принципів дизайну та кодингу, які дозволять будь-якому бажаючому прикрасити свій проект ефектною та продуктивною анімацією. Їх використання дозволить вам отримати плавну роботу сторінок у десктопних та мобільних браузерах. І найголовніше - все це робиться та обслуговується дуже просто.

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

Що таке анімація?

Анімації існували ще до Інтернету. Для створення найкращих із них можна витратити все життя на навчання. Тим не менш, у цій справі також існують закономірності. Ми обговоримо деякі типові та не дуже проблеми, з якими стикаються дизайнери під час створення анімації для розміщення у вебі.

Для отримання плавної анімаціїз 60 fps кожен кадр повинен оброблятись менш ніж за 16 мс! Це малий проміжок часу, тому необхідно знайти дуже ефективні способи рендерингу кожного кадру високої продуктивностіанімації.

Існує безліч способів реалізації веб-анімації. Наприклад, кінострічка існувала ще до Інтернету. Суть її в тому, що вручну промальовані кадри з мінімальною відмінністю демонструвалися кілька разів на секунду, створюючи таким чином ілюзію руху у глядача.

Twitter нещодавно використовували цей простий підхід для них нової анімаціїсерця, прокручуючи у заданій послідовності 26 кадрів.

Отримана в такий спосіб анімація надто складна у реалізації і, насправді, недостатньо плавна.

У багатьох випадках вигідніше використовувати властивість CSS"Transition" для автоматичної анімації елемента при його зміні. Ця техніка відома також як "tweening" і передбачає створення анімації з автоматичною побудовою проміжних зображень. Припустимо, ми маємо 2 зображення одного об'єкта у різних положеннях. Ефекти переходу CSSдопоможуть створити анімацію зміни стану. Їх використання вигідно тим, що можна будь-якої миті скинути або звернути всю логіку анімації. Це ідеальний підхід із розряду «встановив і забув». Добре працює, наприклад, з різними інтро-послідовностями або простими взаємодіями на кшталт активації анімації при наведенні миші.

Також анімація, побудована в CSS на ключових кадрахможе служити ідеальним тломдля вибраних областей сторінки. Наприклад, кільця з логотипу "Гіроскопа" постійно обертаються. Такий підхід добре використовуватиме анімації руху різних механізмів.

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

#1 Не змінюйте ніяких властивостей крім непрозорості (opacity) та перетворення (transform)

Навіть якщо вам здається, що так буде краще, не варто цього робити!

Дотримання цього базового принципу підвищить ефективність роботи на 80%, навіть у мобільному сегменті. Напевно, ви вже чули про це раніше. Ідея не оригінальна, але їй рідко йдуть. Вона є веб-еквівалентом «їжте здорову їжу та виконуйте фізичні вправи». Всі чули, знають, що це правильно, але мало хто дотримується.

Насправді до використання цього принципу досить просто звикнути. Особливу вигоду це принесе тим, хто робив анімації за допомогою традиційних властивостей CSS.

Наприклад, якщо вам потрібно зробити об'єкт меншим, ви можете використовувати властивість трансформації scale замість зміни ширини/висоти. Якщо вам потрібно перемістити елемент, то не варто вовтузитися зі зміною значень відступів, адже така анімація вимагатиме перебудови макета сторінки при кожному кадрі. Найкраще використовуйте прості властивості трансформацій для цього: transform: translateXабо transform: translateY.

Чому це працює?

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

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

Можна збожеволіти, очікуючи завантаження такої сторінки: всі кути заокруглені, використовуються зображення, на всі покладені тіні і для повного щастя додано динамічне розмиття елементів. Якщо таке відбувається 1 раз, то кілька зайвих мілісекунд очікування на роль не зіграють. Але коли весь контент буде виведений на екран, ви більше не захочете чекати перерахунку будь-яких значень для зміни сторінки.

#2 Приховуйте вміст на увазі.

Використовуйте "pointer-events" у CSS: значення "none" поряд з нульовою непрозорістю для приховування елементів

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

У далекі часи, коли анімації оброблялися при допомоги jQuery animate(), основна складність під час роботи з ефектом fade полягала у необхідності перемикання значення властивості display: активувати none припинення ефекту у потрібний момент. Занадто рано і анімація не буде завершена, надто пізно і ви отримуєте невидимий елемент з нульовим значенням opacity, що перекриває сторінку. Потрібен зворотний відгук для очищення екрана після завершення анімації.

Властивість CSS «pointer-events» (існує давно, але чомусь використовують його нечасто) служить для того, щоб зробити речі нечутливими до кліків мишею та іншими взаємодіями. Так, ніби їх взагалі нема на сторінці. Ця властивість може бути легко увімкнена/вимкнена за допомогою CSS. Під час роботи воно не перериває анімацію та не впливає на рендеринг/видимість елементів.

Комбінуючи цю річ з нульовим значенням opacity, ми отримуємо той самий ефект, що дає display: none, але без впливу на продуктивність при запуску нових циклів рендерингу анімації. Якщо потрібно приховати елемент з поля зору, я зазвичай виставляю нульову непрозорість і вимикаю pointer-events. Після цього можу забути про нього, знаючи, що все легко повернути назад і нічого не заважатиме продуктивності сторінки.

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

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

#3 Не потрібно анімувати все поспіль одночасно.

Або використовуйте принцип хореографії.

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

Ви захочете збудувати таймінги таким чином, щоб усі анімації запускалися в різний час. Зазвичай 2-3 анімації можуть працювати без затримок одночасно, особливо якщо вони стартують із невеликим розкидом за часом. Більше 3 одночасних (на око, але не по суті – мінімальний розкид за часом має бути) запусків майже напевно викличуть лаги на екрані.

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

Матеріал-дизайн від Google має деякі з цього питання. Це, звичайно, не єдино вірний шляхале він дає їжу для роздумів і тестування.

#4 Невелике збільшення затримки переходу дозволяє легко дотримуватися принципу хореографії

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

Я зазвичай замінюю один клас на батьківському елементі(найчастіше на body) для того, щоб викликати купу переходів, кожен з яких має свій параметр затримки (transition-delay). Робиться це для того, щоб кожен елемент з'являвся в потрібний час. З точки зору кодингу вам варто турбуватися про значення лише однієї змінної замість підтримки десятків таймінгів у JavaScript.

Розгойдуючи одночасно серію елементів, можна досить просто скомпонувати їхню хореографію. Це потужний підхід, тому що все це одночасно і виглядає добре, і працює швидко, лише пам'ятайте, що тільки 2-3 анімації можна запускати одночасно і все буде добре. Потрібно розповсюдити їх на сторінці так, щоб кожна відпрацьовувалася плавно та вчасно. Сет ваших анімацій має сприйматися глядачем як безперервний потік, а не ланцюжок розрізнених елементів. Єдина плавна сцена.

Приклад коду

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

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

Як правило, використовуються 2 змінні: ваша базова затримка та затримка за часом між кожним елементом. Такий баланс знайти досить складно, але якщо ви потрапите на правильний набірчисел, то все буде чудово.

#5 Використовуйте спільний множник для розробки вslow motion

І прискоріть все це згодом.

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

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

Якщо ви використовуєте Javascript або якийсь CSS-препроцесор на кшталт SASS, код має бути досить простим для побудови правильної структуризмінних.

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

Для налаштування дуже складних анімацій або при пошуку вузьких місць у продуктивності відстеження процесу в уповільненому темпі буде дуже корисним.

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

Ця фішка є чинною частиною OS X: коли ви згортаєте вікно з програмою, бачите анімацію в уповільненому темпі.

#6 Візьміть відео із записом вашого інтерфейсу та прокрутіть, від третьої особи ви зможете побачити більше

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

Деякі люди створюють відео в After Effects, після чого намагаються реалізувати отримане на сайті. Я часто роблю з точністю до навпаки, намагаючись зробити гарне відеона основі користувальницького інтерфейсу сайту.

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

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

#7 Активність мережі може призвести до лагів.

Вам потрібно попередньо завантажити або блокувати великіHTTP-запити

Зображення виступають у цьому плані вирішальним фактором, особливо якщо вони великі за вагою (наприклад, важке тло), або тонна маленьких (завантаження 50-100 аватарів, допустимо), або просто велика кількістьконтенту ( довга сторінказ купою картинок).

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

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

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

#8 Не потрібно змінювати стандартне прокручування.

Ідея заміни скролла може здатися класною, але це не так насправді.

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

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

Ще гіршою витівкоювиглядає заміна стандартного скролла на так званий scrolljacking (контент змінюється в такт прокручування, приклад - сайт Apple). Не робіть цього. Реалізувати вдало такий ефект складно, та й не всім користувачам сподобається.

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

#9 Найчастіше тестуйте свої проекти на мобільних пристроях.

Більшість веб-сайтів створено на ПК. Найчастіше вони тестуються на тій же машині, де їх розробили. Таким чином, Мобільна версіясайту та продуктивність анімацій відходять на задній план. Деякі технології створення анімації (наприклад, canvas) не працюватимуть нормально на мобільних платформах.

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

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

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

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

#10 Тестуйте проекти на різноманітних пристроях

Існує безліч факторів, здатних кардинально вплинути на продуктивність сайту на ПК та мобільних пристроях: роздільна здатність екрану, кількість пікселів у вікні, старість заліза і т.д.

Незважаючи на те, що Chrome та Safari створені на базі Webkit і мають практично однаковий синтаксис, у кожного з них свої власні чудасії. Будь-яке оновлення Хрому одночасно усуває старі помилки і привносить нові, тому ви повинні постійно тримати руку на пульсі, як кажуть.

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

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

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

Сподіваюся, ви знайшли наведені техніки корисними та використовуєте їх у вашому наступному проекті. Успіхів!

Переклад статті https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29

Pas de Deux, Норман Макларен 1968

Анімація - це не мистецтво малювання в русі, а мистецтво руху в малюванні. - Норман Макларен

Всі знають, що таке анімація, але що щодо того, як об'єднати її з Інтернет і мобільним дизайном? Сьогодні багато сайтів використовують анімацію на тому чи іншому рівні, але в основному заради красивої картинки, а не для покращення UX.

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

Сфокусуйтеся на русі, а не на коді

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

Ранні ескізи Bugs Bunny від Чака Джонса показують міркування про те, як надати йому форму, вагу та рух.

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

Це майже як планувати ілюстрацію, ґрунтуючись на кольорі олівця, який у вас є (і ні). Це не правильно.

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

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

Сфокусуйтеся на цілі

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

Анімація завантаження створюється для того, щоб дати користувачам якусь Зворотній зв'язок(або, за Крайній мірі, почуття прогресу). Інші анімації меню можуть бути корисними для того, щоб показати користувачу, де знаходиться меню після закриття. Обидва ці приклади — практична користь для користувача.

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

Давайте подивимося на декоративну, анімацію, що кричить, і щось більш функціональне.

кричуча

елегантна

Як ви бачите, можна досягти практично одного результату і без кричущої, яскравої анімації. Це дає чистий вигляд, і не залишає користувача думати: «е... що тільки що сталося?». Більше того, навантажені анімації здаються повільнішими, ніж частіше ви їх використовуєте.

Вивчіть рух

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

Youtube дозволяє дивитися відео з різною швидкістю відтворення за допомогою панелі плеєра.

Якщо ви не впевнені у русі, знайдіть в Інтернеті відео з його реальним еквівалентом, та вивчайте на повільній швидкості. Низькі швидкостіВідтворення часто показують важливі штрихи. Багато людей не знають, що Youtube дозволяє дивитися відео з різною швидкістю відтворення за допомогою панелі плеєра.

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

Легше створити невидиму анімацію, коли ви розумієте, як люди бачать рух. Тому вивчити світ навколо вас – гарна ідея.

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

Джерело: Мартін Драпо - Backbone Game Engine.

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

Розповідайте вашу історію гармонійно

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

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

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

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

Роблячи спочатку невеликі, але важливі макети та тести, такі як ці, допоможе активізувати ваш загальний гармонійний рух. Є безліч відмінних сайтів, які зробили це просто приголомшливо. Reverend Danger та Every Last Drop використовували анімацію скрізь, щоб розповісти свою історію.

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

Підсумок

Анімація включає величезну кількість стилів і підходів, але це зовсім не означає, що немає ключових і основних понять. Щоб отримати максимум від вашої анімації:

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

Але найголовніше, отримуйте задоволення від процесу створення вашої анімації.

Анімація - один із основних трендів у сучасному сайтобудуванні. Елементи анімації в інтерфейсах виносять їх юзабіліті новий рівень, роблячи їх інтуїтивно зрозумілими та доступними звичайному користувачеві. На лендингах або, наприклад, корпоративних сайтах вона допомагає наочніше розповісти відвідувачеві про ваш продукт або показати його переваги.

Ми зробили добірку з 5 бібліотек для створення анімації на web-сайтах, розповівши про їх переваги, недоліки та сфери застосування.

GreenSock Animation Platform

Але при цьому для анімації HTML елементів tween.js зовсім не підходить - з цим справляються наступні два інструменти.

Move.js

Move.js - javascript-бібліотека, що дозволяє робити все те саме, що й tween.js, тільки з використанням CSS3 та HTML5 замість Canvas. Вона є не найлегшою (як для JS), але однією з найпопулярніших. Набір заздалегідь заготовлених видів анімації (поворот, нахил, ротація тощо) робить її також однією з найлегших у використанні.

Приклад коду з використанням Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

Насправді це не справжні бібліотеки чи фреймворки для анімації, принаймні у звичному розумінні.

Animate.css - всього лише CSS файл, в якому зібрано кілька десятків правил, пов'язаних з анімацій, а WOW.js - лише маленький скрипт, що запускає ці анімації в міру прокручування сторінки.

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

По перше,вирішує легковагість. Усього 2 КБ і жодних залежностей!

По-друге, wow.js та animate.css є вкрай простими у використанні. Швидше за все, вам не доведеться написати жодного рядка зайвого JS коду. Достатньо підключити ці два скрипти до сторінки та додати до елемента, який потрібно анімувати, пару css класів: клас wow та клас потрібної нам анімації.

Тепер при завантаженні сторінки замість статичного відображення цей елемент красиво крутиться:

Для налаштування анімації використовуються спеціальні data-атрибути, наприклад, data-wow-duration="2s"задасть тривалість кручення в 2 секунди.

Демо, більш докладну документацію та повний список data-атрибутів можна знайти на офіційному сайті WOW.js, повний список класів анімації – на офіційному сайті Animate.js.

Анімація засобами JQuery

Слово «анімація»походить від давньо-латинського слова «аніма», що означає "душа". Спроби вдихнути життя у статичні штучні об'єкти з'явилися тисячі й тисячі років тому, коли Пігмаліон спробував розбудити свій витвір – статую чарівної Галатії.

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

ЯК З'ЯВИЛАСЯ АНІМАЦІЯ У ВЕБ-ДИЗАЙНІ?

Анімація з'явилася у мережі досить давно. Спочатку були малесенькі .GIF-Файли з різних рухомих зображень та відеокліпів. Це був темний період з масою миготливих листівок, танців кішок та інших речей, які б ми не бачили.

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

Зовсім недавно, всі анімовані елементи та ефекти на сайтах, були створені за допомогою технології Flash. На той момент це була революційна технологія, хоча вона була дуже важкою і значно збільшувала час завантаження сайту. У наші дні, анімація створюється з використанням більше легкого способукодування JavaScript і CSS, які допомагають додавати елементи, що рухаються на сайт, не перевантажуючи його. І, що важливіше, анімація сьогодні використовується для покращення UX, а не просто для задоволення. Це видатний інструмент для веб-дизайнерів, які можуть допомогти зробити сайт краще та простіше у використанні.

ПОКРАЩЕННЯ ЮЗАБІЛІТІ З АНІМАЦІЄЮ

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

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

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

E TECHEVENT – САЙТ З АНІМОВАНИМИ ЕЛЕМЕНТАМИ

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

ІНТЕРАКТИВНИЙ САЙТ A PPS

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

ВИКОРИСТАННЯ АНІМАЦІЇ У МАТЕРІАЛЬНОМУ ДИЗАЙНІ

Анімація у веб-дизайні - це гарний хід, який може виявитися надзвичайно корисним, якщо не використовується лише з декоративною метою. UI та UX дизайнери зараз часто використовують анімацію для вдосконалення свого робочого процесу. Навіть Google розуміє важливість такого руху для юзабіліті. Так і з'явився матеріальний дизайн.

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

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

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

ПОРАДИ ПО АНІМАЦІЇ, ЩО ВИКОРИСТОВУЄТЬСЯ НА ВЕБ-САЙТАХ

При реалізації анімації на вашому сайті, ви повинні також ретельно вивчити всі підводні камені. Анімовані елементи можуть досі шкодити продуктивність сайту та UX.

По-перше, ви повинні добре перевірити, якщо анімація не уповільнює роботу вашого сайту, швидкість завантаження та загальну продуктивність. Це може бути виявлено за допомогою простого порівняннявашого сайту з анімацією та продуктивністю великовагової гри для ПК. Якщо гра працює більш плавно на вашому робочому столі, ніж веб-сайт – це має спричинити перегляд анімації, що використовується.

The Happy Forecast Website

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

Переконайтеся, що ваша анімація чуйна. Чуйність веб-сайту є обов'язковою, якщо ви хочете досягти успіху. А якщо він працює і чудово виглядає тільки на екрані робочого столу – ви можете програти битву за користувачів. Існує безліч інструментів, які дозволяють створювати чуйну анімацію (наприклад, Adobe After Effects або Invision) та сайтобудівники (Webflow та MotoCMS), які включають чуйні анімовані ефекти у свій робочий процес. Вони пропонують різні видианімації, які можуть використовуватися всередині сайту, покращити його юзабіліті та дизайн.

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

Laerepenger Website

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

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

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

Ну і в кінці, кілька прикладів, коли анімація була використана з точним попаданняму ціль.

Kikk Website
Nodeplus Digital Agency
Creative Cruise
Animated Scenery Vintage Farm
Pomade Digital Agency