З тих пір, як я повністю перейшла на фронтенд-розробку на роботі, я працюю над багатьма веб-анімаціями, переходами та ефектами. Чим більше я це роблю, тим більше креативних способів я знаходжу, щоб змусити це працювати.
Раніше я шукала GIF-файл, стискала його і закінчував на цьому. Потім я дізналася про бібліотеку Three.js, яка дозволяє створювати інтерактивні веб-додатки прямо в браузері. Мій улюблений проект на Three.js — це, мабуть, різдвяна ялинка з подарунками, які можна було б пересувати та розгортати. Створювати щось подібне з нуля було дуже весело!
Потім я дізнався про Lottie, формат анімаційних файлів з відкритим вихідним кодом, який швидко став новим галузевим стандартом у світі веб-розробки.
Я дуже люблю Lottie, але встановлення всіх цих залежностей для однієї крихітної анімації здається мені перебором. Не кажучи вже про те, що його плеєр для React значно збільшує розмір пакета. Якщо весь ваш додаток складається з інтерактивних елементів та анімацій, то використання Lottie має сенс. Але якщо вам потрібна лише одна крихітна анімація, у мене є кращий варіант для вас.
Чесно кажучи, я й гадки не мала, що можна легко зробити анімований SVG з нуля. Секрет полягає в тому, щоб помістити CSS, який анімує зображення, безпосередньо в SVG, потім зберегти його як зображення і посилатися на нього як на звичайний SVG у вашому коді АБО закодувати його і помістити безпосередньо в CSS. Останній підхід робить його менш читабельним, але набагато компактнішим. Я б не рекомендувала цей шлях, якщо ви плануєте змінювати анімацію в майбутньому.
Існує безліч безкоштовних SVG-кодерів, якщо ви вирішите розмістити анімований SVG безпосередньо в CSS:
background-image: url("data:image/svg+xml,...)
Ось посилання на мій улюблений інструмент.
Розшифрувати цю анімацію і отримати зображення у форматі SVG ще простіше — просто скопіюйте і вставте її у ваш браузер і збережіть зображення, натиснувши на кнопку «Зберегти як…».
Насамкінець, я хочу дати посилання на статтю, яка надихнула мене на експерименти з CSS в SVG. Це дивовижна стаття команди StackOverflow, де вони описують, як їм прийшла в голову ця ідея і як крок за кроком реалізувати свій власний анімований SVG. Я почала свої експерименти з копіювання їхнього коду конфетті, а потім повільно створювала власні прості анімації.
Кінцевий результат був дійсно вражаючим — моя анімація займала лише 8 КБ, і мені довелося додати рівно нуль залежностей, щоб змусити її працювати. Хіба це не круто?
Цей текст з особистого блогу, опублікований з дозволу автора.
Щосекундно збільшується обсяг інформації в мережі. Бізнес збирає дорогоцінні байти даних, структурує їх, аналізує і…
Штучний інтелект (ШІ) вже не просто модне слово, а рушійна сила, що змінює саму суть…
Алгоритм консенсусу – це серце будь-якого блокчейна. Саме він визначає, хто і як записує нові…
Зайшов на сторінку, а там — спінери, skeleton і порожнеча? Це не баг, це —…
Таке запитання мені поставив мій знайомий, коли побачив мій профіль. Я настільки над цим задумалась,…
Нещодавно я вписався в один цікавий проєкт. Довелося розібратись з процесом звітності американських фармацевтичних компаній…