Швидкий перегляд товару

Від автора: Модальне вікно «швидкий перегляд товару», анімоване з допомогою 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).

• 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 зображення в галереї, щоб воно збігалося з видимим зображенням слайдера.