Crear el efecto de volar hacia el carrito con jQuery

En este tutorial veremos cómo crear una mejor interfaz en nuestra tienda online añadiéndole un efecto. ¿Has comprado alguna vez en una tienda online? Seguro que en muchas tiendas online has visto como, despues añadir un producto al carrito, este se ha desplazado hacia el carrito mediante una animación. En este tutorial te explicaremos cómo llevarlo a cabo en tu proyecto web.

Utilizando este script no solo podrás añadir el efecto a un carrito de una tienda online, si no a otras funciones en las que te venga bien.

Javascript

Hemos creado una función llamada FlyToElement(). Debes pasar el elemento que se va a desplazar como primer parámetro y el elemento hacia donde se va a desplazar como segundo parámetro. Aquí tienes el código de la función FlyToElement().

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();
                });
            });
        });
    });
}

Puedes meter la función FlyToElement() en un archivo JS externo (fly.js) e incluirlo antes del siguiente Javascript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src="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

Con este CSS mostraremos el icono del carrito

.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;
}

Fuente: codexworld.com