Flying Images to Shopping Cart, Animated Add to Cart using jQuery

Today I am going to explain you how to add a product to shopping cart with flying product images. It will really take your eCommerce application to next level when it comes to User Experience

One of my subscriber Mr. Rahul who is working on his eCommerce project. He was asked how to implement flying image effect while adding product to cart. I thought this tutorial will really useful for everyone who is working on eCommerce portal.

I have added jQuery Easing Plugin to add more effect while moving image to cart. see more from here – http://gsgd.co.uk/sandbox/jquery/easing/ . You can change the animation at any time in this script

jQuery Code to Fly Image to Cart

$('.add-to-cart').click(function() {

   var cart = $('.shopping_bg');

   var imgtofly = $(this).parents('li.cart_items').find('a.product-image img').eq(0);

	if (imgtofly) {

		var imgclone = imgtofly.clone()

			.offset({ top:imgtofly.offset().top, left:imgtofly.offset().left })

			.css({'opacity':'0.7', 'position':'absolute', 'height':'150px', 'width':'150px', 'z-index':'1000'})

			.appendTo($('body'))

			.animate({

				'top':cart.offset().top + 10,

				'left':cart.offset().left + 30,

				'width':55,

				'height':55

			}, 1000, 'easeInElastic');

		imgclone.animate({'width':0, 'height':0}, function(){ $(this).detach() });

	}

	return false;

});

I have used easeInElastic easing animation for moving effect. You can modify this animation based on your needs.

HTML Code

<ul>

    <li class="cart_items">

        <div class="content">

            <a class="product-image" href="javascript:;" title="Product 1"><img alt="Product 1" class="thumbnail" src="1.jpg"></a>

        </div><button class="add-to-cart" title="Add to Cart" type=

        "button">Add to Cart</button>

    </li>

    <li class="cart_items">

        <div class="content">

            <a class="product-image" href="javascript:;" title="Product 2"><img alt="Product 2" class="thumbnail" src="2.jpg"></a>

        </div><button class="add-to-cart" title="Add to Cart" type=

        "button">Add to Cart</button>

    </li>

</ul>

I hope you will like this tutorial. You can use this code in your live projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

View Live Demo Download