Гравітація - це теж настрій: похмуре, страшне і сумне або світле, заворожуючий і веселе. Шляхом відтворення даних видів руху за допомогою CSS, ми можемо оживити інтерфейси наших сайтів цікавою анімацією. Простим прикладом є підстрибуюче м'яч. Його рухливість може бути використана для того, щоб привернути увагу користувача до дуже важливого повідомлення. Розмітка складається з одного елемента div, який оформлений таким чином, щоб він міг нагадувати справжній м'яч:
А тепер додаємо CSS, що задає рух для м'яча. Деякі значення були запозичені з роботи Алби Браун (Albie Brown). Для наочності стилі наводяться без Вендорний префіксів:
Я використовую одиниці vw і vh для вказівки розмірів м'яча і для його руху, тому це буде повністю чуйним рішенням в сучасних браузерах, без необхідності використання медіа-запитів. Викликаємо анімацію для м'яча:
Зверніть увагу на змінене значення у властивості transform-origin, за допомогою якого стає легше спозиционировать елемент (особливо якщо він відскакує від іншого об'єкта), а також з ним легше додати нотку реалізму, що ми і зробимо на наступному кроці.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Сама по собі ця анімація створює ілюзію гравітації, але не є завершеним ефектом: м'який об'єкт, наприклад, гумовий м'яч, буде трохи стискуватися при ударі об землю, а також розтягуватися (відновлювати форму) при відскоку. Американський художник-мультиплікатор Уолт Дісней говорив, що подібний рух, тобто стиснення і розтягнення, є «найважливішим принципом в анімації». Художники використовують даний принцип, щоб надати своїм персонажам і об'єктів більше життя і реалістичності. Це легко можна зробити за допомогою CSS. Потрібно додати функцію scale для властивості transform, яке вже присутній в нашій анімації:
Те, наскільки будуть змінюватися параметри для стиснення і розтягування, частково залежить від самого об'єкта і частково від стилю анімації: в деяких аніме, наприклад, можуть задаватися граничні значення. Звичайно, у даній анімації є ще одна нереалістична особливість: вона триває нескінченно. Надалі я розповім, як додати природне затухання для ваших анімаційних дизайнів в CSS.
Подивіться демо-приклад даного ефекту на CodePen
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі