Мы обновляем курсы каждый месяц
Посмотрите курсы→

Анимация в карточках & Webflow

Webflow

Я часто вижу использование карточек на сайтах. На сегодня - это трендовое направление. И не обязательно это карточка товара в интернет-магазине. Это может быть выделенный блок информации, визитная карточка или просто дата в календаре оформленная интересным образом. Но само оформление у многих дизайнеров заканчивается использованием мягких теней или цветового решения. Это и понятно, так как дизайнеры, которые только рисуют сайты не могут создать концепцию анимации. Если вы начинаете работать с Webflow и верстать свои макеты сайтов, то начните использовать по настоящему уникальную возможность  анимации в Webflow. Примеры того как можно это сделать давайте и рассмотрим на примерах.

Материал дизайн – карточка человека

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

Дизайн в стиле Google Now

В стиле помощника Google Now созданы данные карточки. Они имеют стилизованные удлиненные тени и соответствующие дизайну google цвета. Но самое крутое, конечно это анимация, которая включается при клике на карточку.

Карточки с Parallax эффектом

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

Карточка товара

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

Карточка статьи

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

Карточка блога

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

Карточка профиля

Такой формат часто используется не лендингах, когда хотят показать авторов продукта, видел на сайтах веб-студий или сайтах с портфолио фрилансеров. В примере используется аккуратный формат Material Design. Тонкая тень привлекает к себе внимание. В зависимости от размера экрана карта переключается между горизонтальными и вертикальными макетами. Общая схема просто так проста и проста - именно то, что должно быть профильной карточкой.

Новостная карточка

Отличительной чертой этой карточки является полноразмерная фотография. Тут нет ничего лишнего. Отлично подходит для пабликов и блогов. 

FlexBox карточки

Флекс технология верстки продолжает победоносно нести свой флаг в разработке адаптивных сайтов. Карточки могут легко подстраиваться в разные форматы сетки флексов. В примере показано табличное исполнение. Преимущество карточки в том, что тут большой размер заголовка. Сейчас я пишу статьи и уже считаю буквы в заголовке, чтобы моя карточка "новости" выглядела корректно. 

Карточка рецепта

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

Нужная обратная связь от вас!

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

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

Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии