How to create fly to cart in basket effect using jQuery and CSS

I found a very nice and useful tutorial animation on tutorial for your shopping cart projects web master you can use this cool animation of add to cart fly, long time ago I saw this animation of jQuery on a website. i am going to give this demo to you and explain how to use it. Its an animation of jQuery its work when some one click on any item add to cart button that item’s picture fly and take place in your basket.


I am not providing you complete cart its only animation of fly to cart / basket

How to use it:

This CSS used for this tutorial to make it more cool:

<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #F2EEE9;
font: normal 13px/1.5 Georgia, Serif;
color: #333;
}
.wrapper {
width: 705px;
margin: 20px auto;
padding: 20px;
}
h1 {
display: inline-block;
background-color: #333;
color: #fff;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 4px 20px;
float: left;
}
.clear {
clear: both;
}
.items {
display: block;
margin: 20px 0;
}
.item {
background-color: #fff;
float: left;
margin: 0 10px 10px 0;
width: 205px;
padding: 10px;
height: 290px;
}
.item img {
display: block;
margin: auto;
}
h2 {
font-size: 16px;
display: block;
border-bottom: 1px solid #ccc;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
button {
border: 1px solid #722A1B;
padding: 4px 14px;
background-color: #fff;
color: #722A1B;
text-transform: uppercase;
float: right;
margin: 5px 0;
font-weight: bold;
cursor: pointer;
}
span {
float: right;
}
.shopping-cart {
display: inline-block;
background: url(“shoping_cart1.png”) no-repeat 0 0;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
}
</style>

use with this jQuery

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js”></script>

It is a simple jQuery:

<script>
$(‘.add-to-cart’).on(‘click’, function () {
var cart = $(‘.shopping-cart’);
var imgtodrag = $(this).parent(‘.item’).find(“img”).eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
‘opacity’: ‘0.5’,
‘position’: ‘absolute’,
‘height’: ‘150px’,
‘width’: ‘150px’,
‘z-index’: ‘100’
})
.appendTo($(‘body’))
.animate({
‘top’: cart.offset().top + 10,
‘left’: cart.offset().left + 10,
‘width’: 75,
‘height’: 75
}, 1000, ‘easeInOutExpo’);

setTimeout(function () {
cart.effect(“shake”, {
times: 2
}, 200);
}, 1500);

imgclone.animate({
‘width’: 0,
‘height’: 0
}, function () {
$(this).detach()
});
}
});
</script>

HTML:

<div class=”wrapper”>
<h1>F11G Store</h1>
<span><i class=”shopping-cart”></i></span>

<div class=”clear”></div>
<div class=”items”>
<div class=”item”>
<img src=”item1.jpg” alt=”item” />
<h2>Item 1</h2>

<p>Price: <em>$1449</em>
</p>
<button class=”add-to-cart” type=”button”>Add to cart</button>
</div>
<div class=”item”>
<img src=”item2.jpg” alt=”item” />
<h2>Item 2</h2>

<p>Price: <em>$649</em>
</p>
<button class=”add-to-cart” type=”button”>Add to cart</button>
</div>
</div>
</div>