CSS-анимация становится все более популярной. Сейчас ее используют в самых необычных проявлениях, поэтому кажется, что это нечто суперсложное. Если изучить код таких эффектов, часто оказывается, что они достаточно просты в исполнении. В этой статье мы поговорим о том, как работают движущиеся объекты на веб-сайтах и рассмотрим несколько успешных кейсов.
CSS-animation придает сайтам динамичность. Она основана на перемещении HTML-элементов страницы, без задействования JavaScript и Flash. Создаются подобные эффекты при помощи привязки ключевых кадров. Каждая веха вмещает в себя стили для активных элементов. Отличительная характеристика CSS-анимации — возможность использования почти для любого элемента или псевдоэлемента. Она позволяет создавать автоматическое воспроизведение в заданный отрезок времени, не перегружая систему.
Направление начало набирать популярность в 2018 году и до сих пор продолжает наращивать обороты. За это время эффекты стали не только отыгрывать роль декора, но и мягко направлять пользователей к совершению целевых действий. Из этого вытекает основное правило — не использовать тяжеловесную анимацию, которая не только замедлит загрузку страниц, но и будет отвлекать от основной информации. Современная тяга к минимализму охватила и эту сферу, но почти все лучшие работы в этом направлении все еще являются вариациями двенадцати принципов от Disney, сформированных в восьмидесятых.
Рассмотрим несколько примеров качественной и уместной анимации, выполненной благодаря стилям CSS.
Сайт напитка 7UP оживляют пузырьки. В первый раз они появляются на прелоадере, а после — сопровождают на всех страницах, усиливая ощущение свежести. Отдельные элементы отрисованы в SVG, к каждому из них привязано два эффекта.
Задача первого — добавлять реалистичности при помощи колебаний, а второго — задавать разную степень непрозрачности объекта и определять траекторию движения. Смещение одних пузырьков происходит с задержкой, а других — в строго определенное время, что добавляет дополнительной реалистичности.
Если открыть пример анимации пузырей, становится понятно, что для этой техники было разработано два слоя — один для маленьких, а второй для больших. Размещаются все части строго внизу экрана, чтобы создать эффект открытой бутылки газировки. Каждый элемент имеет свою траекторию, что совсем не усложняет задачу программиста. В начале и конце пути к верхней части дисплея пузырьки становятся прозрачными. После привязки этих изменений специалист задает мелкие колебания.
Идея многим похожа на предыдущую, отличие только в плавности и направлении. Снегопад неплохо представлен у USA TODAY. В довольно классическую задумку можно добавить креатива, и вот перед пользователями уже не разноцветные кружочки, а дождь из цыплят.
Объекты все также создаются в SVG, технически процесс сильно напоминает ситуацию с 7UP, описанную выше. Основным действием будет разделение на слои и замена значений Y ключевых кадров.
Эффект применяется не к отдельным объектам, а к слоям, что немного ускоряет его создание. Стоит отметить, что изменение скорости кружочков может добавить веб-платформе глубины.
Прелоадер музыкального ресурса peeKabeat дополнен пульсирующими кругами, которые будто бы отображают распространение музыки в пространстве. Это выглядит очень уместно, при том, что сама анимация довольно проста. Эффект универсален — его используют во многих ситуациях, просто перерабатывая под определенный дизайн. Тем не менее, он продолжает выглядеть свежо и выполнять свои задачи.
На сайте было создано три круга, к которым привязана смена прозрачности и масштаба. Стоит отметить, что инструмент позволяет настроить скорость движения каждого круга отдельно, что может существенно повлиять на итоговый результат.
Одинаковые линии движения нескольких элементов, которые поддерживают друг друга — это всегда хорошее решение. Именно таким способом на платформе Coulee Creative пользователей познакомили с командой. Создатели стильно разбросали буквы важных для позиционирования слов и поставили на фон фото членов команды. Без анимации эта идея выглядела бы сухо, но каждый участник кивает, а перемещение букв продолжает его движение.
Далее на сайте также присутствует движение, что оживляет и без того стильный дизайн. При этом анимация не выглядит навязчивой или излишней.
Если посмотреть на данный пример, видно что движущиеся элементы крохотные и ненавязчивые. Тем не менее, они отлично справляются со своей задачей — оживить сайт, добавить ему легкости и некой эксклюзивности. Если убрать с этой веб-платформы анимацию, останется плоская скучная картинка, поэтому покадровая прорисовка действительно имеет смысл. Такой вид анимации несколько сложнее, ведь требует навыков работы с векторной графикой. Каждое движение птиц отрисовано в редакторе, только после этого объединено и сохранено как SVG.