5 SVG-анимаций, которые оживят ваш веб-дизайн

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

Работа с масштабируемой векторной графикой

SVG — это формат файла, в котором для хранения и отображения изображений используются линии, а не пиксели. Как следует из названия, масштабируемая векторная графика может масштабироваться без потери качества.

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

Вы можете создавать SVG с помощью программного обеспечения, такого как Adobe Illustrator, и веб-сайтов, таких как SVGator, но вы также можете создавать их вручную. Формат SVG представляет собой простой текстовый язык XML и немного похож на HTML.

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

Сочетание JS и CSS дает такие результаты, и все начинается с цикла, который добавляет прослушиватели событий к каждой кнопке.

за (вар я = 0; я  menuItems[i].addEventListener('нажмите', кнопкаКлик);
}

После нажатия кнопки функция buttonClick() выполняет несколько действий. Он начинается с изменения цвета фона страницы:

документ.body.style.backgroundColor = `#${это.getAttribute('фон данных')}`;

После этого он добавляет класс CSS к нажатой кнопке, запуская анимацию и изменяя цвет фона кнопки.

menuItemActive.classList.remove('menu__item--активный');
этот.классСписок.добавить('menu__item--активный');
menuItemActive.classList.add('menu__item--анимация');
этот.классСписок.добавить('menu__item--анимация');
menuItemActive = это;

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

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

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

.путь-1 {
 штрих-дашаррай: 1850 2000;
 смещение штриха-тире: 1851;
 переход: 5с линейный;
}

Функция JS добавляет уникальный класс CSS к каждому разделу текста, используя один родительский класс CSS, чтобы еще больше снизить плотность кода.

$(функция() {
функцияанимацияСтарт() {
 $('#контейнер').добавитькласс('плавник');
 }
setTimeout(animationStart, 250);
});

В качестве примера только для CSS эта анимация SVG отлично подходит для всех, кто не хочет погружаться в код JavaScript. Идея проста: кнопка начинается с подчеркивания, которое превращается в полную рамку, когда вы наводите на нее курсор.

Ключевые кадры CSS создают два состояния кнопки. Первое состояние имеет более толстую обводку и покрывает только нижнюю часть кнопки формы SVG, начиная с 0%. Другое состояние — это полная кнопка на 100% с более тонким штрихом.

@ключевые кадры рисовать {
 0% {
 штрих-дашаррай: 140 540;
 смещение штриха-тире: -474;
 ширина обводки: 8px;
 }
100% {
 штрих-дашаррай: 760;
 штрих-тиреофсет: 0;
 ширина обводки: 2px;
 }
}

Эти ключевые кадры применяются только к контуру кнопки формы SVG, когда пользователь наводит курсор на кнопку. Он использует :hover Псевдокласс CSS для этого запускается правило, добавляющее ключевые кадры анимации к кнопке.

.svg-обертка:наведите.форма {
-вебкит-анимация: 0.5срисоватьлинейныйвперед;
анимация: 0.5срисоватьлинейныйвперед;
}

Это показывает, как можно создавать красивые анимации без использования сложного кода. Вы можете использовать эти основы и свое творчество, чтобы создавать более сложные интерактивные элементы для своего собственного веб-сайта.

С таким количеством интересных техник под капотом трудно решить, что обсуждать, глядя на этот пример часов SVG.

Для начала он использует функцию Date() для сбора текущей даты и времени. Используя это значение, функции getHours(), getMinutes() и getSeconds() разбивают данные на соответствующие части. Затем код вычисляет положение каждой стрелки на часах.

вар дата = новыйДата();
вар часыУгол = 360 * date.getHours() / 12 + date.getMinutes() / 2;
вар минутный угол = 360 * date.getMinutes() / 60;
вар угол сек = 360 * дата.getSeconds () / 60;

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

руки[0].setAttribute('от', шифтер (угол сек));
руки[0].setAttribute('к', шифтер (secAngle + 360));
руки[1].setAttribute('от', шифтер (угол минуты));
руки[1].setAttribute('к', шифтер (минутный угол + 360));
руки[2].setAttribute('от', шифтер (часыУгол));
руки[2].setAttribute('к', шифтер (часы, угол + 360));

Время имеет ограниченное применение в области веб-дизайна, но оно полезно для таймеров обратного отсчета, часов и хранения меток времени. Этот пример также дает представление о создании динамических SVG-анимаций с переменными.

Эта CSS-анимация SVG обеспечивает изящный способ сделать любую форму невероятной.

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

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

Этот пример SVG особенно впечатляет, потому что он полагается только на CSS для получения такого сложного результата. Он использует переменные CSS для хранения данных, что упрощает управление такими элементами, как основное приложение.

$ приложение-заполнение: 6вх;
$ приложение-ширина: 50вх;
$ приложение-высота: 90вх;
#приложение {
 ширина: $app-ширина;
 высота: $app-высота;
 заполнение: $app-заполнение;
 фон: белый;
 коробка-тень: 002бэр RGBA(чернить, 0.1);
}

Вы можете использовать этот пример практически в любой веб-форме и привлечь пользователей, как никогда раньше.

Создание собственных SVG-анимаций с помощью HTML, JS и CSS

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

9 хитростей CSS для продвинутых медиазапросов, которые вы должны знать

Читать дальше

Об авторе