Автор

Быстрый просмотр продукта на jQuery

Быстрый просмотр продукта на jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

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

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

В наши дни нативные приложения используют полную мощность устройства и концепции дизайна движения, чтобы обеспечить лучший UX. Интернет должен работать с одинаковой скоростью. Есть отличные инструменты, такие как Bounce.js от Joel Besada и Velocity.js от Julian Shapiro, которые могут помочь вам создать гладкую анимацию.

Возвращаясь к нашему примеру, вот краткая анимация, показывающая вам то, что мы имели в виду (.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, чтобы избежать эффектов 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 property, чтобы получить дополнительную поддержку браузера).

.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, мы оцениваем значения верхнего, левого и ширины изображений выбранной галереи и назначаем их элементу .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, плагин, который переопределяет $ .animate () для jQuery для значительно большей производительности (если вы его никогда не использовали, вы должны окончательно дать ему попробовать!). Мы использовали «пружинное» ослабление для первого шага анимации и «легкость» для второго.

$('.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 изображения камбуза, таким образом, оно равно видимому изображению ползунка.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Быстрый просмотр продукта на jQuery

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


Быстрый просмотр продукта на jQuery

Все очень просто, т.к. для этого используются специальные программы-скрипты. И об одном из этих скриптов я и решил рассказать - Highlight.js, который кстати используется и на этом сайте.


Быстрый просмотр продукта на jQuery

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


Быстрый просмотр продукта на jQuery

Еще один красивый фон для сайта, и в данном уроке мы рассмотрим еще один замечательный пример реализации объемного фона. Идея состоит в построении сетки из кубиков, которые будут двигаться в бесконечном цикле, при этом постепенно изменяя угол вращение и блика на них, что будет создавать масштабный эффект, такой эффект отлично подойдет для портфолио или заглушки для сайта. Такой фон явно не оставит равнодушным Ваших посетителей.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close