Быстрый просмотр товара
В мире электронной коммерции (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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <ul class="cd-items cd-container"> <li class="cd-item"> <img src="img/item-1.jpg" alt="Item Preview"> <a href="#0" class="cd-trigger">Quick View</a> </li><!-- cd-item --> <li><!-- ... --></li> </ul><!-- cd-items --> <div class="cd-quick-view"> <div class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li> <li><img src="img/item-2.jpg" alt="Product 2"></li> <li><img src="img/item-3.jpg" alt="Product 3"></li> </ul><!-- cd-slider --> <ul class="cd-slider-navigation"> <li><a class="cd-next" href="#0">Prev</a></li> <li><a class="cd-prev" href="#0">Next</a></li> </ul><!-- cd-slider-navigation --> </div><!-- cd-slider-wrapper --> <div class="cd-item-info"> <h2>Produt Title</h2> <p>Lorem ipsum dolor sit amet, consecteturadipisicing...</p> <ul class="cd-item-action"> <li><button class="add-to-cart">Add to cart</button></li> <li><a href="#0">Learn more</a></li> </ul><!-- cd-item-action --> </div><!-- cd-item-info --> <a href="#0" class="cd-close">Close</a> </div><!--cd-quick-view --> |
Добавление стилей
Прежде всего, эффект быстрого просмотра не доступен на устройствах с маленьким экраном. Причина заключается в том, что на телефоне будет легче перейти непосредственно на страницу с товаром.
Большая часть анимации создана с помощью jQuery (плагин Velocity.js), чтобы избежать возможных побочных эффектов при отрисовке страницы. Слой с затемнением был создан с помощью создания анимации для псевдо-элемента body::after.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | body::after { /* слой с затемнением–становится видимым при активации элемента с классом .cd-quick-view */ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(71,55,78,0.8); visibility:hidden; opacity:0; transition:opacity .3s 0s, visibility 0s .3s; } @media only screen and (min-width: 1024px) { body.overlay-layer::after { visibility: visible; opacity:1; transition:opacity .3s 0s, visibility 0s 0s; } } |
Ко многим элементам применяется анимация или CSS3 переходы. Чтобы сохранить хорошую производительность, мы использовали хак translateZ(0) (в ожидании улучшения браузерной поддержки в отношении нового свойства will-change).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .cd-quick-view { display:block; position:fixed; max-width:900px; visibility:hidden; /* Заставляем работать аппаратное ускорение движка WebKit */ transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:left,top,width; z-index:1; } |
Других 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» – для второго.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $('.cd-trigger').on('click',function(event){ $('.cd-quick-view').css({ "top":topSelected,// это значение для верхнего края выбранного изображения "left":leftSelected,// это значение для левого края выбранного изображения "width":widthSelected,// это ширина выбранного изображения }).velocity({ //анимация быстрого просмотра: создается анимация для ширины и //происходит выравнивание по центру области просмотра. //во время выполнения данной анимации видно только изображение слайдера. 'width':sliderFinalWidth+'px', 'left':finalLeft+'px',// ($(window).width - sliderFinalWidth)/2, 'top':finalTop+'px',// ($(window).height - slider final height)/2, },1000,[400,20]) .velocity({ 'width':quickViewWidth+'px',// 80% от области просмотра 'left':quickViewLeft+'px',// 10% от области просмотра },300,'ease',function(){ //show quick view content $('.cd-quick-view').addClass('add-content'); }).addClass('is-visible'); //добавляем класс.overlay-layer к элементу body, добавляем класс .empty-box для выбранного элемента с классом .cd-item //... }); |
Когда пользователь закрывает окно быстрого просмотра, мы используем обратную анимацию (здесь уже значение «ease» используется в обоих случаях).
Дополнительное замечание: перед закрытием окна быстрого просмотра, мы обновляем значение атрибута src у изображения в галерее, чтобы оно совпадало с видимым изображением слайдера.
Автор: Claudia Romano
Источник: http://codyhouse.co/
Редакция: Команда webformyself.
Исходники: product-quick-view3