» » » Анимация полета в корзину
17 0  

Анимация полета в корзину

Скрипт который реализирует эффект - анимированная отправка товара в корзину при клике на кнопку «купить» или «в корзину»

Принцип работы следующий:

класс .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. 


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019