Эта анимированная боковая корзина - это умный и ненавязчивый способ позволить пользователям входить и выходить из списка продуктов, которые они хотят купить, без необходимости обновлять страницу или запускать всплывающее окно.
CSS3 может привести к инфляции анимаций и переходов. Иногда, однако, эта техника может использоваться для благородного намерения: боковая корзина, всего в нескольких кликах от пользователя, - это что-то умное.
Опыт аналогичен мобильным приложениям, что означает, что люди привыкли видеть контент со стороны. Кроме того, пользователи могут легко удалять предметы из корзины, что, я думаю, является чем-то хорошим: чем больше клиентов чувствует контроль, тем больше они доверяют продавцу.
Давайте посмотрим на код!
Создание структуры
HTML довольно простой. Триггер #cd-cart используется для запуска корзины покупок. Галерея продуктов завершается внутри элемента main. Пустой #cd-shadow-layer используется для размытия фона при видимости тележки. Элементы корзины организованы в неупорядоченный список.
<header>
<!-- logo and menu here -->
<div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
</header>
<main>
<!-- content here -->
</main>
<div id="cd-shadow-layer"></div>
<div id="cd-cart">
<h2>Cart</h2>
<ul class="cd-cart-items">
<li>
<!-- ... -->
</li>
<li>
<!-- ... -->
</li>
</ul> <!-- cd-cart-items -->
<div class="cd-cart-total">
<p>Total <span>$39.96</span></p>
</div> <!-- cd-cart-total -->
<a href="#0" class="checkout-btn">Checkout</a>
<p class="cd-go-to-cart"><a href="#0">Go to cart page</a></p>
</div> <!-- cd-cart -->
Добавление стиля
Корзина помещена на видимой части, придавая ему position:fixed; и right: -100%; Когда пользователь нажимает на значок корзины, мы используем jQuery, чтобы добавить класс .speed-in в #cd-cart. Этот класс изменяет правильное значение от -100% до 0. Все, что остается сделать - это добавить переход CSS3 к правильному значению для достижения гладкой анимации.
-webkit-overflow-scrolling: touch; Используется для сглаживания прокрутки на сенсорных устройствах (веб-браузеры). Рекомендуется использовать свойство переполнения, что приводит к ошибкам прокрутки.
#cd-cart {
position: fixed;
top: 0;
right: -100%;
height: 100%;
/* header height */
padding-top: 50px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: right 0.3s;
&.speed-in {
right: 0;
}
}
Обработка событий
Мы не много делали в jQuery, кроме добавления классов в соответствии с конкретными событиями. Следует отметить, однако, что в исходной структуре HTML мы помещаем навигацию вне <header>. Поскольку мы создали этот ресурс, начиная с мобильного, мы хотели, чтобы меню соскальзывало сбоку, подобно тележке, но с противоположного направления. Для этого нам было легче перемещать навигацию за пределы заголовка. Как только пользователь достигнет размера окна просмотра, достаточно большого (1200px в нашей демонстрации), мы используем jQuery для перемещения навигации внутри заголовка.
<header>
<div id="logo"></div>
<div id="cd-hamburger-menu"><a class="cd-img-replace" href="#0">Menu</a></div>
<div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
<!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>
<nav id="main-nav">
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li><!-- ... --></li>
</ul>
</nav>function move_navigation( $navigation, $MQ) {
if ( $(window).width() >= $MQ ) {
$navigation.detach();
$navigation.appendTo('header');
} else {
$navigation.detach();
$navigation.insertAfter('header');
}
}
