Jquery: анимированный полет товара в корзину

5360 1191 27 Октября 2017, 12:38

bascket

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

	$('.product-order').on('click', function(){
	
		var that = $(this).closest('.product-item').find('img');
		var bascket = $(".bascket");
		var w = that.width();
		
        that.clone()
            .css({'width' : w,
			'position' : 'absolute',
			'z-index' : '9999',
			top: that.offset().top,
			left:that.offset().left})
            .appendTo("body")
            .animate({opacity: 0.05,
                left: bascket.offset()['left'],
                top: bascket.offset()['top'],
                width: 20}, 1000, function() {	
					$(this).remove();
				});
	});

Принцип работы следующий: класс .product-order - это класс кнопки купить, на которую будут нажимать пользователи. Класс .product-item - это обертка нашей карточки товара, внутри которой есть и сама кнопка купить и картинка, которая полетит в корзину.  Класс .bascket - это класс вашей корзины, туда и полетит изображение. Итак, при клике

Находим изображение товара,  замеряем его позицию от левого верхнего угла страницы. 

Клонируем картинку, помещаем ее над исходной картинкой. И анимируем полет до блока с корзиной со скоростью 1000ms. 

Теги: jquery анимация js полет в корзину
Другие статьи
Комментарии
Нашли решение?
Последние комментарии
Иван
Иван 1 год назад
1
Sadieff
Sadieff 2 года назад
17
Sadieff
Sadieff 2 года назад
2
Группа вконтакте