Создание анимированных SVG-баннеров

Создание анимированных SVG-баннеров

От автора: я не занимаюсь дизайном и маркетингом. Я разработчик софта, но, будучи предпринимателем, я занимаюсь всем подряд. Я трачу много времени на создание зарисовок и поиски в Google , чтобы понять, что как работает, и я хотел бы поделиться своими навыками в дизайне и создании анимированной SVG-рекламы.

Преимущества SVG

SVG или Scalable Vector Graphic, или по-русски «масштабируемая векторная графика» — основанная на XML структура, с помощью которой можно создавать фигуры, линии и цвета на изображении так, чтобы изображение можно было просматривать на любом экране без потери качества. SVG плохо подходит для фотографий. С его помощью можно делать рисунки, текст и простые фигуры.

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

В настоящее время SVG-изображения хорошо поддерживаются в браузерах, хотя в IE9 и ниже могут возникать различные сложности (вот это сюрприз).

Спецификация

Дэвид дал нам стандартное место под баннер в верхней части контента. Реклама должна быть адаптивной от мобильных размеров и до десктопа, вплоть до стандартного разрешения 728px на 90px.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Наша реклама должна быстро описать TrackJS и то, как мы можем помочь. Мы проверяем ваш JS-код на баги и предоставляем отчет об ошибках, если они есть. Нужно понять, как преподнести это коротко, но с долькой юмора.

Мы должны быть ответственными рекламодателями:

реклама должна четко отличаться от дизайна страницы;

реклама не должна блокировать или замедлять загрузку контента;

реклама не должна отвлекать посетителя от контента.

Смотрите демо

Моя первая анимированная реклама

Я хотел создать что-то, что отталкивалось бы от «жучков». У нас было несколько файлов Adobe Illustrator, в которых жучок раздавливался для предыдущего стикера, который, возможно, можно использовать повторно. Может быть, жучки будут пролетать над рекламой и давиться кнопкой «free trial».

Я полез в интернет, чтобы понять, как это сделать. Я создал SVG-элемент в файле HTML и начал изучать. Сначала я задал высоту и ширину баннера. Удвойте размеры для viewBox (окно для рисования), чтобы изображение смотрелось четко на дисплеях с большим разрешением.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720px" height="90px" viewBox="0 0 1456 180" style="background-color:#2c3237"></svg>

Так я получил крутой серый блок! Небольшое достижение.

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

Дальше я добавил кнопку, но экспортировал ее отдельным SVG, чтобы потом ей можно было управлять отдельно. Код получился примерно такой:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<svg xmlns="http://www.w3.org/2000/svg">
 <path class="tjs-logo" d="..."/>
 <path class="tjs-button" d="..."/>
</svg>

Анимирование SVG с помощью CSS

Добавим парочку анимаций. Я экспортировал анимацию жучка из Adobe Illustrator в SVG и вытянул путь. Мне нужно было несколько жуков, но я не хотел использовать копии одного пути, так как он был довольно громоздким. К счастью, я нашел элемент SVG Symbol, который позволяет объявлять фигуры, из которых можно создавать несколько экземпляров. Что мне и нужно.

<defs>
 <symbol id="tjs-bug">
 <g class="tjs-bug">
 <path d="..." />
 <path d="..." />
 <path d="..." />
 </g>
 </symbol>
</defs>

Символы создаются через тег use, я создал три символа. Каждому я добавил трансформацию и сжал их до 0%, чтобы скрыть их по умолчанию.

<use class="tjs-bug-1" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-2" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-3" xlink:href="#tjs-bug" transform="scale(0)" />

Я написал пару CSS-анимаций. Очень удобно, что CSS можно вставить сразу в SVG. Правила нужно обернуть в синтаксис CDATA, чтобы они превратились в валидный XML (хотя большинство браузеров не смотрят на это).

Для всех трех жучков я создал CSS keyframe, чтобы они «пролетали» по рекламе. В середине анимации жучок останавливался и с помощью функции ease приземлялся и двигался дальше. Далее я прикрепил keyframe к классу на все теги use.

<svg …>
 <style type="text/css"><![CDATA[
 @keyframes flight-1 {
 0% {
 transform: translate(-100px, -40px) scale(2.5) rotate(105deg)
 }
 66% {
 transform: translate(500px, 0) scale(2.5) rotate(85deg)
 }
 100% {
 transform: translate(1800px, -60px) scale(2.5) rotate(85deg)
 }
 }
 .tjs-bug-1 {
 animation: 1.8s flight-1 1s forwards ease;
 transform: scale(0)
 }<br class="m_-8121298990609363754m_-8731295688480698401gmail-kix-line-break">  ]]></style>
 <...>
</svg>

Точно так же я экспортировал раздавленного жука из Adobe Illustrator и вставил его в SVG. Я добавил другую keyframe-анимацию, в которой кнопка появлялась сверху вниз. Анимация настолько быстрая, что кажется, будто кнопка раздавливает жуков.

Следующее поколение

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

<object data="animated-happens.svg" type="image/svg+xml" style="width:100%;pointer-events:none;"></object>

Со второй анимацией мне помогал талантливый иллюстратор. Просматривая его код, я нашел два важных шаблона, которые я пропустил.

animate вместо CSS

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

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

Ссылка на SVG в виде object

Вместо вставки SVG-разметки напрямую в HTML-документ, как сделал я, он добавил ссылку на внешний SVG-файл с помощью тега object. С его помощью можно подключать внешний SVG и ссылаться на него в DOM.

<object data="animated-happens.svg" type="image/svg+xml"></object>

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

Смотрите демо

Заключение

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

Веб становится лучше с каждым днем. Я горжусь тем, что могу сделать его лучше и пофиксить баги, когда веб ломается. С радостью помогу и вам. Забирайте совершенно бесплатный триал на TrackJS уже сегодня.

Автор: Todd Gardner

Источник: https://davidwalsh.name/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree