Анимация добавления товара в карзину
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;