Быстрый просмотр товара

Быстрый просмотр товара

От автора: Модальное окно «быстрый просмотр товара», анимированное с помощью CSS3 и Velocity.js, дает пользователю возможность получить быстрый доступ к основной информации о товаре.

В мире электронной коммерции (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).

<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.

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).

.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» – для второго.

$('.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.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. BECEJLbE / Данил

    Ваши переводы кода — это что-то.
    Каким гугл-переводчиком вы убрали все пробелы из комментариев в коде? :D

    • Андрей Кудлай

      Спасибо, исправили.
      Кстати, а при чем здесь «гугл-переводчик»? Насколько я вижу, это не машинный перевод.

  2. Andrey

    Добрый день, а не подскажите, как можно совместить modal-dialog от бутсрапа или же Jquery ui dialog или же ваш вариант с Ajax, чтобы данный загружались в данное окошко при нажатии на ссылку. Например верстка скрытого модального окошка пока не содержит контента, нажимаем на ссылку, получаем код элемента каким то образом, данные постом или гетом летят через js в php, получаем ответ, наполняем данные и подгружаем их в верстку модалки либо видим пиктограмму загрузки до полного подгружения. Тем самым сэкономим вес странички, избавившись от лишних картинок. У вас есть на сайте подобная реализация на Jquery или Angular? ну или аналог данного принципа? Самый беспкоящий вопрос — это как повесить 2 обработчика на одно событие.

  3. Нурбий

    Добрый день! Расскажите чайнику как применить данный функционал быстрого просмотра.

    • Андрей Кудлай

      Добрый день. А что именно непонятно? В статье ведь есть пошаговое объяснение. Не думаю, что в рамках комментария можно полнее что-то рассказать по теме.

  4. dmitrof23

    А если добавить еще один элемент div с классом .cd-quick-view, с другим содержанием, то как его привязать к элементу , чтобы у одного было одно содержание, а у соседнего другое?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree