Сб, 3/11/18 – 7:09 | No Comment

Было время, когда веб-дизайн напоминал по стилю периодические печатные издания. Колонки и столбцы задавались строками текста и зафиксированными графическими изображениями. Но эволюция HTML, CSS и JavaScript …

Читать статью »
Маркетинг

О маркетинге в Интернете и эффективности сайта

Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » CSS верстка

7 CSS-анимаций с использованием SVG + сайты применяющие эффект

27 февраля 2018 Нет комментариев

В современном веб-дизайне нельзя не заметить популярность анимации средствами CSS и SVG. Действительно, анимация элементов сайта сегодня переживает второе рождение. В 2018 году многие применяемые эффекты стали полезнее для пользователя и выглядят правильней с точки зрения юзабилити веб-ресурса и UX. Технологии упростили сложные задачи анимирования графики и элементов не жертвуя производительностью сайтов (как это было с Flash). К тому же современный веб-дизайн не требует усложнять что-либо и даже легкой анимацией страниц можно достичь впечатляющих результатов, сделать сайт эффектнее.

Читайте также:  Анимация по правилам UX-дизайна: полное руководство

Анимация в дизайнерском творчестве всегда занимала особое место и привлекала как новичков, так и профессионалов-разработчиков. Сейчас, когда в тренде индивидуальность и уникальность спецэффектов, самое время обратить внимание на современные возможности CSS, а также SVG. При возросшем разрешении экранов всевозможных устройств, вполне объясним интерес к масштабированию веб-элементов без потери качества. Самое интересное в современном веб-креативе то, что стильные анимационные эффекты вполне возможно создавать самостоятельно.

В подборке красивых и современных SVG/CSS анимаций кратко осписаны основные моменты реализации. Для наглядного примера и вдохновения: сайты использующие эти эффекты.


01. Всплывающие пузырьки

Пример применения на сайте: 7UP
Полный код на CodePen

CSS анимация на сайте: примеры с использованием SVG

CSS анимация пузырьков на сайте 7UP – это великолепный пример эффектного самовыражения бренда через веб-дизайн. Процесс анимации состоит из нескольких частей: SVG отрисовка, затем анимирование каждого пузырька в два этапа.

Первая анимация изменяет прозрачность и поднимает пузырьки наверх в окне просмотра, а вторая добавляет реалистичные колебания. Выброс и движение происходят хаотично с разными задержками и продолжительностью. При помощи SVG создается два слоя – для больших и маленьких пузырьков.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

Метод такого раздельного анимирования на SVG потребует поэлементной анимации. Элемент в SVG может быть использован подобно DIV в HTML; нам нужно обернуть каждый пузырек в группирующий тег.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS дает мощные возможности для анимирования, его реально простой код создает сложные эффекты. Для продвигающихся вверх по экрану пузырьков, мы меняем прозрачность до полного их исчезновения.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

Для создания колебания нужно просто добавить движение влево и вправо – достаточное для заметности эффекта, но не более того.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

Анимирование пузырьков потребует использовать применяемые ранее группы и nth-of-type для идентификации отдельных групп. Ради аппаратного ускорения, мы задействуем значение прозрачности и свойство will-change.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

Для задания времени анимирования и задержек ограничится лучше парой секунд, а повторять бесконечно. Кроме того, используем тайминг функцию ease-in-out, чтобы приблизить вид к естественному.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

02. Значок скроллинга

Пример применения на сайте: Baltic Training
Код на CodePen

CSS анимация на сайте: простой способ сделать анимированный значок скроллинга

Посетителю надо показать, что ниже есть контент. Приглашение к скроллингу реализуем легкой анимацией значка мыши. Хотя это решаемо HTML-элементами, мы используем наиболее подходящие SVG-конструкции. Создаем прямоугольник с закругленными углами и круговой элемент, который мы будем анимировать. Плюс SVG в возможности масштабирования.

К созданной SVG-иконке применяются стили, чтобы задать размер и место в контейнере. Привязываем ссылку и помещаем значок вниз экрана.

<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
  <g fill="none" fill-rule="evenodd">
  <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
  <circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
  </g>
</svg>

Начинаем анимирование иконки. Задаем начало движению: от 0 и до 20 процентов. Для своего промежутка 20% применяется бесконечным повторением.

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
}

Добавляем прозрачность по Y-вертикали, используя 100% в конечной точке анимированного движения для исчезновения кружка.

@keyframes scroll {
  ...
  10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.01;
  }
}

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

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

03. Постепенно появляющаяся надпись

Пример применения на сайте: Toy Fight. Сайты, интересно разнообразившие эффект: trademark-trademarktomer lerner, draft

Примеры на CodePen для paths и text

CSS анимация на сайте: делаем появляющуюся надпись

Анимированной предзагрузкой Toy Fight демонстрирует свое доменное имя, применяя эффект постепенно появляющихся рукописных букв. Рассматриваем реализацию эффекта средствами SVG. Есть два варианта: анимирование надписи и использование SVG-текста. У каждого метода свои плюсы-минусы.

Создание keyframe-анимации происходит с использованием stroke-dashoffset, stroke-dasharray. Получаем эффект написания «от руки». Тут мы обращаемся к Sass/SCSS и nth-of-type.


04. Буддийское мандала

Пример применения на сайте: God of War
На CodePen вариант1 и вариант2

.masking {
  transform: scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
}

И снова SVG язык применяется для создания форм, паттернов и масок. Как только это сделано, мы используем CSS и подготавливаем все для анимации.

Далее, создаем keyframe-анимацию. Изменять тут нужно лишь два свойства: opacity и scale.

@keyframes scale {
  0%, 50% {
  opacity: 1;
  }
  80% {
  opacity: 0;
  }
  100% {
  transform: scale(1.4);
  opacity: 0;
  }
}

Lastly we need to apply the animation to the mask;

.masking {
  ...
  animation: scale 4s linear infinite;
}

05. Летящие птицы

Пример применения на сайте: Père et Fils
Варианты с одиночной птицей и стаей птиц

CSS эффекты для сайта: анимация полета птиц

Мы начнем с абсолютно векторного подхода, рисуя каждую форму под нашу анимацию, прорисовывая разные фазы птичьего полета. Это поможет манипулировать расположением векторов и линиями с очертаниями. В итоге, формы заключаются в соответствующие по размеру боксы, следующие один за другим. Файл экспортируем как SVG.

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

<div class="bird-container">
  <div class="bird"></div>
</div>

Мы используем наш SVG как фон div’а птицы и выбираем размеры форм. Ширину используем для приблизительного вычисления позиционирования в бэкграунде. Увеличиваем ширину десятикратно, затем подгоняем цифру под размер.

.bird {
  background-image: url('bird.svg');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
}
@keyframes fly-cycle {
  100% {
  background-position: -900px 0;
  } 
}

Для анимирования – пара трюков на CSS, возможно не знакомых вам. Используется animation-timing-function для пошагового отображения – вроде того, как в блокноте пролистывают страницы с картинкой для ее «оживления».

animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;

Теперь, когда цикл полета создан – птица машет крыльями, но остается на месте. Перемещения по экрану задает другая keyframe-анимация. Птицы движутся по экрану горизонтально, меняя вертикальную высоту в неком диапазоне (для большей реалистичности).

После того как анимация создана, можно использовать копии птицы, устанавливать время и задержки.

.bird--one {
  animation-duration: 1s;
  animation-delay: -0.5s;
}
.bird--two {
  animation-duration: 0.9s;
  animation-delay: -0.75s;
}

06. Анимированная иконка-гамбургер

Пример применения на сайте: Wearables Guide, Sassi Holford.

Сайты, интересно разнообразившие эффект: Minne Apparel, Waaark, Fran Solo, Nikos Pandazaras

Варианты иконки: spans и SVGколлекция анимаций иконки-гамбургером

CSS эффекты для сайта: анимация гамбургер-иконки

Анимация иконки-гамбургера часто встречается в современных сайтах: линии скрещиваются / переворачиваются, либо иконка меняет форму. До недавнего времени эффект достигался при помощи HTML элементов, но SVG формат лучше подходит для такой задачи. Больше нет нужды раздувать код множественными spans.

Благодаря характерным особенностям анимирования, код для SVG изменился не намного – техники те же самые. Для начала нужно задействовать четыре элемента: spans в случае с div, либо paths в случае применения SVG. При использовании spans, позиционирование внутри div решается средствами CSS (в SVG этот вопрос уже решен).

Располагаем линии 2 и 3 в центре – одну поверх другой, а линии 1 и 4 – сверху и снизу. Тут применяются два свойства: opacity и rotation. Прежде всего, нам нужно чтобы исчезали линии 1 и 4 – для этого воспользуемся селектором :nth-child.

.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
opacity: 0; }

Осталось повернуть линии друг к другу на 45 градусов.

.menu-icon.is-active {element-type}:nth-child(2) {
transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
transform: rotate(-45deg); }

07. Прелоадер загрузки

Пример применения на сайте: Better Brand Agency
Смотреть код на CodePen, более сложный пример прелоадера-крутилки

Иконка предзагрузки состоит из четырех чередующихся по цвету окружностей.

<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
  <circle cx="170" cy="170" r="160" stroke="#E2007C"/>
  <circle cx="170" cy="170" r="135" stroke="#404041"/>
  <circle cx="170" cy="170" r="110" stroke="#E2007C"/>
  <circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>

В CSS к окружностям применяются базовые стили, затем используем :nth-of-type селектор для различных значений stroke-dasharray каждого круга. С ‘ease-in-out’ анимация предзагрузки будет выглядеть повеселей.

circle:nth-of-type(1) {
  stroke-dasharray: 550; 
}
circle:nth-of-type(2) {
  stroke-dasharray: 500; 
}
circle:nth-of-type(3) {
  stroke-dasharray: 450;}
circle:nth-of-type(4) {
  stroke-dasharray: 300; 
}

Теперь нужна keyframe-анимация. Она проста: требуется лишь поворачивать окружность на 360 градусов. Применяем анимацию на 50% и возвращаем окружность на исходную позицию.

@keyframes preloader {
50% {
transform: rotate(360deg);
}
}

Остается лишь запустить созданную анимацию с нужными параметрами. Даем название, устанавливаем продолжительность, количество итераций и применяем тайминг-функцию.

animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

Круговой прелоадер работает, но его части поворачиваются одновременно. Исправим это добавив задержку, используем Sass для цикла.

@for $i from 1 through 4 {
  &:nth-of-type(#{$i}) {
  animation-delay: #{$i * 0.15}s;
} }

Благодаря задержкам окружности вращаются по очереди, догоняя друг друга. Единственная проблема, изначально при загрузке страницы части лоадера начинает двигаться синхронно. Чтобы компенсировать это без нежелательных временных пауз вначале, просто выставим отрицательную величину задержки.

animation-delay: -#{$i * 0.15}s;
Читайте также:  Красивая анимированная предзагрузка сайта: 50 стильных прелоадер-страниц