SVG анимация в Web-дизайне – Тенденции и Примеры

booncon pixels

SVG анимация в Web-дизайне

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

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

 

Эффекты Навигации

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

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

Bjango

Один из примеров можно найти в навигации сайта Bjango. Каждое звено, в том числе логотип, выполнены в виде SVG. При наведении на ссылки вы получите хороший эффект отскока в сочетании с уникальным цветом. Логотип на самом деле отображает уникальный градиент, чтобы захватить больше внимания.

Некоторые разработчики, часто против использования SVG для текстовых элементов, однако эффект действительно добавляет интереса в дизайне. Даже если это довольно простая анимация, она четко выделяется.

 

Если вы хотите поставить большие динамические значки, их можно подогнать под суб-заголовки или для внутренних разделов навигации. Например, страница Zoook «MUSICANA» использует музыкальные значки, чтобы очертить категории продуктов.

Zoook «MUSICANA»

Заметьте, что первичный значок, имеет тонкие SVG анимационные эффекты. Ноты играют из динамика и дают ощущение жизни странице.

Нет необходимости, ставить нежелательные SVG анимации  заголовку страницы — но при правильном использовании они могут добавить некоторую вибрацию в макет.

 

Векторные фоны

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

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

Часто графика предназначена, чтобы использовать брендинг компании в то время как другие предназначены, чтобы просто быть более «реалистичными». Взгляните на главную страницу  Cleverbridge.

Cleverbridge

Раздел главной страницы использует ярко-оранжевую карту с фрактальными элементами “прыжков” по разным странам. Анимация предназначена для представления электронной коммерции и как Интернет облегчает приобретения чего-либо из любой точки мира.

Некоторые люди создают более эстетический фон, который определяет настроение. На сайте booncon pixels вы найдете блок анимированной графики в виде плоских векторных фигур.

booncon pixels

Если вы просмотрите на исходный код, вы поймете что, это не единственное изображение, а полный элемент SVG в HTML коде. Анимированные элементы содержатся в отдельных группах, например в колесе обозрения.

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

 

Еще один пример — это часть фона. Одна из страниц сайта Setosa посвящена объяснению , как автобусы создают связку. Там небольшая площадь для содержания вместе с анимированной трассой, чтобы отобразить как перемещаются автобусы.

Setosa

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

 

Анимированные Иконки

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

Threader

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

 

Authentic Form & Function имеет иной подход к значкам SVG анимации. Взгляните на их страницу услуг и прокрутите вниз к каждому разделу.

Authentic Form & Function

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

 

SVG и Canvas

Разработчики протестировали элементы Canvas в сочетании с SVG анимацией. Можно использовать HTML < Canvas > , как контейнер, который может содержать несколько SVG анимаций или даже растровые изображения.

Это позволяет разработчикам анимировать несколько элементов на странице в разных направлениях. Возьмем, к примеру целевую страницу для Hell’o Baby.

Hell’o Baby

Каждая SVG анимация содержится в элементе Canvas для большего контроля над иконами.

Для большинства дизайнеров это будет слишком далеким. Canvas в первую очередь полезен при проектировании HTML5 для 2D / 3D графики. Но, так как эта спецификация развивается, думаю скоро мы увидим много больших анимационных трюков, которые создаются с помощью Canvas.

 

Будущее SVG

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

Aliexpress INTAliexpress INTAliexpress INT

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

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