Fly to cart effect using jQuery

This tutorial helps you to provide better user interface for your shopping cart. Are you working on eCommerce application? And concerned about the user experience? If so, then you can use jQuery Fly to Cart Effect. Our jQuery Fly to Cart / Fly to Basket script helps you to implement flying images effect while products are added to shopping cart.

Using our script you can add the flying effect not only the shopping cart but also the other places where you want to add the flying effect to the element. Let’s check out the easy jQuery fly effect tutorial below.

JavaScript:

We have created a JavaScript function called flyToElement().You need to pass the flyer element into the first parameter and flying to element into the second parameter. flyToElement() function’s code are given below.

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
     
    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

You can place the flyToElement() into an external js file (codex-fly.js) and include this file before writing the JavaScript code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src="codex-fly.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.add-to-cart').on('click',function(){
        //Scroll to top if cart icon is hidden on top
        $('html, body').animate({
            'scrollTop' : $(".cart_anchor").position().top
        });
        //Select item image and pass to the function
        var itemImg = $(this).parent().find('img').eq(0);
        flyToElement($(itemImg), $('.cart_anchor'));
    });
});
</script>

HTML:

<a class="cart_anchor"></a>
<ul class="items">
    <li><img src="pro-image1.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image2.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image3.jpg" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
    <li><img src="pro-image4.png" /><a href="javascript:void(0);" class="add-to-cart">Add to cart</a></li>
</ul>

CSS:

Following CSS are used for display cart icon.

.cart_anchor{ 
    float:right; 
    vertical-align:top; 
    background: url('images/cart-icon.png') no-repeat center center / 100% auto;
    width: 50px;
    height: 50px; 
    margin-bottom: 50px;
}

 If you want to styling the products list and cart icon like our demo, you can download the full source code ZIP file from the above Download link.