Qudrat Qodirov

Быстрый просмотр товара2 min read

В мире электронной коммерции (e-commerce) существуют определенные шаблоны, дизайн которых направлен на увеличение конверсии за счет упрощения пользовательского взаимодействия. Другие шаблоны преследуют такую же цель, но за счет предоставления дополнительной информации там, где это необходимо. Модальное окно быстрого просмотра товара относится ко второй группе шаблонов.

Стандартный процесс получается такой: нажатие на кнопку быстрого просмотра открывает модальное окно с дополнительной информацией и кнопкой призыва к действию (call-to-action). При создании нашего демо-примера мы не «изобретали велосипед»: в конечном счете вы все равно получаете тот же результат. Хотя мы и попытались улучшить переход из пункта А в пункт Б.

В настоящее время мобильные приложения используют все доступные возможности устройства и понятия анимационного дизайна (motiondesign), чтобы максимально улучшить опыт взаимодействия. Веб-приложениям необходимо не отставать. Существуют потрясающие инструменты, например, Bounce.js (автор: JoelBesada) и Velocity.js (автор: Julian Shapiro), которые помогают создать плавную анимацию.

Возвращаясь к нашему примеру, посмотрим на небольшую анимацию, которая продемонстрирует нашу задумку (изображение в формате .gif создано в программе AfterEffects):

Создание структуры

Галерея является неупорядоченным списком. Все самое интересное происходит в элементе div с классом .cd-quick-view, содержащем слайдер (.cd-slider-wrapper) и информацию о товаре (.cd-item-info).

Добавление стилей

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

Большая часть анимации создана с помощью jQuery (плагин Velocity.js), чтобы избежать возможных побочных эффектов при отрисовке страницы. Слой с затемнением был создан с помощью создания анимации для псевдо-элемента body::after.

Ко многим элементам применяется анимация или CSS3 переходы. Чтобы сохранить хорошую производительность, мы использовали хак translateZ(0) (в ожидании улучшения браузерной поддержки в отношении нового свойства will-change).

Других CSS трюков, заслуживающих внимания, нет. Давайте погрузимся в jQuery!

Обработка событий

Когда пользователь нажимает на элемент с классом .cd-trigger, мы вычисляем значения для свойств top, left и параметры ширины у выбранного изображения в галерее, и присваиваем их элементу с классом .cd-quick-view (который имеет свойство position: fixed). Таким образом элемент с классом .cd-quick-view имеет такие же размеры, что и изображение в галерее ,и полностью закрывает его (тем временем изображение в галерее скрыто с помощью класса .empty-box).

Затем мы создаем анимацию для элемента с классом .cd-quick-view. Первым делом мы сохраняем анимацию для ширины элемента с классом .cd-quick-view в sliderFinalWidth (это переменная, для которой установлено значение 400 в файле .js). Это значение представляет ширину изображения слайдера внутри окна быстрого просмотра. Мы так же создаем анимацию для позиции элемента с классом.cd-quick-view (значения верхнего и левого краев), чтобы он был отцентрирован в области просмотра (высота для окна быстрого просмотра автоматически берется из высоты изображения слайдера). Обратите внимание на то, что во время выполнения данного шага, видимым будет только изображение слайдера, в то время как остальной контент окна быстрого просмотра остается скрытым.

Затем мы изменяем ширину элемента с классом .cd-quick-view, установив конечное значение (80% от ширины области просмотра, с максимальным значением равным 900, установленным в переменной maxQuickWidth) и соответственно изменяем его позицию, чтобы окно всегда было выровнено по центру.

После этого шага мы присваиваем класс .add-content к элементу с классом .cd-quick-view, чтобы отобразить скрытый контент.

Для создания анимации мы использовали Velocity.js, плагин, позволяющий улучшить производительность jQuery функции $.animate()(если вы никогда не использовали его, то вам действительно стоит попробовать!). Мы использовали значение «spring» для выполнения первого шага анимации и значение «ease» – для второго.

Когда пользователь закрывает окно быстрого просмотра, мы используем обратную анимацию (здесь уже значение «ease» используется в обоих случаях).

Дополнительное замечание: перед закрытием окна быстрого просмотра, мы обновляем значение атрибута src у изображения в галерее, чтобы оно совпадало с видимым изображением слайдера.

Автор: Claudia Romano

Источник: http://codyhouse.co/

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

Исходники: product-quick-view3

Обсуждение закрыто.

%d такие блоггеры, как: