Анимация полета в корзину
Скрипт который реализирует эффект - анимированная отправка товара в корзину при клике на кнопку «купить» или «в корзину»
Принцип работы следующий:
класс .product-order - это класс кнопки купить, на которую будут нажимать пользователи.
Класс .product-item - это обертка нашей карточки товара, внутри которой есть и сама кнопка купить и картинка, которая полетит в корзину.
Класс .bascket - это класс вашей корзины, туда и полетит изображение.
$('.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();
});
});
Страница с примером- https://patelna.biz/001-skovorodka.html
Итак, при клике находим изображение товара, замеряем его позицию от левого верхнего угла страницы.
Клонируем картинку, помещаем ее над исходной картинкой. И анимируем полет до блока с корзиной со скоростью 1000ms.