Одна из хотелок заказчиков интернет магазинов — анимированная отправка товара в корзину при клике на кнопку «купить» или «в корзину». Сделать данный эффект не сложно, использую библиотеку 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.
Руслан
6 лет назадyanka
6 лет назадВася
6 лет назадДмитрий
6 лет назадМихаил
4 года назадпишет
Uncaught TypeError: Cannot read property 'left' of undefined
Рома
4 года назадРоман
4 года назад