Полет товара в корзину на jQuery

  Александр Маврин   Комментариев нет

Полет товара в корзину на jQuery

Привет всем! Сегодня у нас на разборе очень классный эффект на jQuery, который очень эффектно смотрится на интернет-магазинах. Не знаю как правильно он называется, но назовем его — анимированный полет товара в корзину. Много раз видел такую штуку на различных сайтах и думал, что для реализации такой фичи нужна специальная библиотека и что все очень сложно. Но на самом деле не очень. Средний уровень JS. У меня получилось совершенно случайно. На досуге изучал jQuery анимацию и вышло нечто похожее, осталось только немного допилить. И вот, что в итоге получилось:

Демо

Так выглядит разметка на странице примера:

1
2
3
4
5
6
<div class="image_block">
 <img src="sell.png" alt="Покупка" class="block" width="100"/>
</div>
<input type="button" value="Добавить в корзину"/>
<img src="trash.png" alt="trash" class="img"/>
<div class="block-2">Товар добавлен! <span>+</span></div>

.image_block — Обертка для блока с товаром
.block — Сам товар
button — Кнопка добавления товара в корзину
.img — Корзина магазина
.block-2 — Всплывающий блок, появляющийся после добавления товара в корзину

CSS код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.block{
    position: absolute;
    top: 50%;
    left: 0;
}
.img{
    position: absolute;
    right: 0;
    top: 0;
}
.block-2 {
    width: 400px;
    height: 100px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 12px -9px #333;
    text-align: center;
    font-family: sans-serif;
    opacity: 0;
}
.block-2 span{
	position: absolute;
	right: 5px;
	top: 0px;
	cursor: pointer;
	transform: rotate(45deg);
	font-size: 20px;
}	
 
input[type="button"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #2196F3;
    color: #fff;
    box-shadow: 0 4px 5px -2px #363636;
    cursor: pointer;
    outline: none;
}

И самое интересное в jQuery коде, который магическим образом делает красивый полет товара в корзину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
  $('input:button').click(function(){
    $('.block').clone()  
       .css({'position' : 'absolute', 'z-index' : '100'})  
           .appendTo(".image_block").animate({
		top: $(".img").offset()['top'],
		left: $(".img").offset()['left'],
		opacity: 0,
		width: 40
	},1500, function(){
	  $(this).remove();
	  $('.block-2').show().animate({
	     top: 200,
	     opacity: 1
	});
setTimeout(function(){
  $('.block-2').fadeOut(500)
}, 2000);
});
$('.block-2 span').click(function(){
 $('.block-2').fadeOut(300);
});			
});			
});

2 строка — Запускаем функцию по клику на кнопке
3 строка — клонируем товар
4 — задаем начальные css свойства для нашего клона
5 — вставляем клон в блок .image_block
6, 7 — перемещение товара в корзину, предварительно получив ее координаты
8 — убавляем прозрачность до нуля в конце полета
9 — убавляем ширину
10 — время анимации 1.5 секунды

Дальше идет call back функция, которая запускает появление всплывающего окна, его закрытие через 2 секунды, а так же закрытие по клику на крестик в правом верхнем углу. Эти функции необязательные, их можно не применять. Вот таким образом делается полет товара в корзину. Надеюсь вам было понятно. Если остались вопросы, готов ответить на них в комментариях.
Скачайте пример для более подробного исследования.

СКАЧАТЬ

Добавить страницу в закладки

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

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