Быстрый просмотр продукта [CSS3 + Velocity.js]

Предлагаю читателям «Хабрахабра» перевод публикации «Product Quick View» ^[1] с сайта codyhouse.co.

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

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

Сегодня нативные приложения используют всю мощность устройств и понятие дизайн движений для обеспечения лучшего UX (User Experience — Пользовательский опыт). Web должен работать на той же скорости. Существуют крутые инструменты, такие как Bounce.js ^[2] и Velocity.js ^[3], позволяющие нам добиться плавной анимации.

Возвращаясь к нашему самородку, вот небольшое превью, чтобы показать, что мы имели ввиду (.gif создана в After Effects):

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

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

<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, consectetur adipisicing...</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 ^[3] для предотвращения jank эффекта. Темный уровень наложения создавался при помощи анимации псевдоэлемента body::after:

body::after {
  /* dark overlay layer - visible when we fire .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 ^[4], чтобы получить больше нативной поддержки браузера).

.cd-quick-view {
    display: block;
    position: fixed;
    max-width: 900px;
    visibility: hidden;
 
    /* Force Hardware Acceleration in 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, width и присваиваем их элементу .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 ^[3], плагин повторно реализует jQuery .animate(), но с завидно большей производительностью (если вы никогда не использовали его, вы должны дать ему попытку!). Мы использовали для первого шага замедление «пружина», а для второго «простота»:

$('.cd-trigger').on('click', function(event){
$('.cd-quick-view').css({
    "top": topSelected, // this is the selected image top value
    "left": leftSelected, // this is the selected image left value
    "width": widthSelected, // this is the selected image width
}).velocity({
//animate the quick view: animate its width and center it in the viewport
//during this animation, only the slider image is visible
    '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% of the viewport
'left': quickViewLeft+'px', // 10% of the viewport
}, 300, 'ease' ,function(){
//show quick view content
$('.cd-quick-view').addClass('add-content');
}).addClass('is-visible');
 
//assign .overlay-layer class to the body, assign the .empty-box class to the selected .cd-item
//...
 
});

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

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

Автор: aleeyt

Источник ^[5]