fantazer
10/21/2016 - 7:37 AM

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

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

	var flyBasket = function () {
	 $(".item__btn").click(function (e) { //click on btn
		 var imgBasket = $(e.target).closest(".item ");//find fly img
		 console.log(imgBasket);
		 $('.cart').removeClass('shake');
		 var locationBasket = $('.cart').offset();//find basket
		 var basketY = locationBasket.top + 'px';
		 var basketX = locationBasket.left + $('.cart').width()  + 'px';
		 var imgY = imgBasket.offset().top;
		 var imgX = imgBasket.offset().left;
		 imgBasket
			 .clone()
			 .appendTo("body")
			 .addClass("item--clone")
			 .css({
			 	'position': 'absolute',
			 	'z-index': '1001',
			 	'left': imgX,
			 	'top': imgY,

			 	})
			 .animate({
				 opacity: 0.1,
				 top: basketY,
				 left: basketX,
				 width: 20,
				 height: 20
			 }, 700, function () {
				 $(this).remove();
			 });
			  setTimeout(function () {
                $('.cart').addClass('shake');
         }, 700)
	 });
	};

	flyBasket();
@keyframes shake
	from,11.1%,to
		transform: translate3d(0, 0, 0);
	22.2%
		transform: skewX(-12.5deg) skewY(-12.5deg);
	33.3%
		transform: skewX(6.25deg) skewY(6.25deg);
	44.4%
		transform: skewX(-3.125deg) skewY(-3.125deg);
	55.5%
		transform: skewX(1.5625deg) skewY(1.5625deg);
	66.6%
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	77.7%
		transform: skewX(0.390625deg) skewY(0.390625deg);
	88.8%
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);


.shake
	animation: shake 1.2s cubic-bezier(.36,.07,.19,.97) both
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;