Fly To Shopping Cart Effect With jQuery - flyto

A lightweight jQuery plugin for the fly to cart effect that allows to fly the product to the basket on your eCommerce website.

How to use it:

1. Include jQuery, jQuery UI and the jQuery flyto plugin on the html page.

<script src="//code.jquery.com/jquery.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="assets/js/flyto.js"></script>

2. Create the shopping cart and product list as these:

<img class="cart" src="cart-lrg.png" alt="Cart">

<section class="items">
  <ul>
    <li>
      <button class="my-btn" type="button">
        <img class="icon" src="cart-sm.png" alt="cart icon"> 
        Add to cart
      </button>
    </li>    
    <li>
      <button class="my-btn" type="button">
        <img class="icon" src="cart-sm.png" alt="cart icon"> 
        Add to cart
      </button>
    </li> 
    <li>
      <button class="my-btn" type="button">
        <img class="icon" src="cart-sm.png" alt="cart icon"> 
        Add to cart
      </button>
    </li> 
  </ul>
</section>

3. Activate the plugin and done.

$('.items').flyto({
  item      : 'li',
  target    : '.cart',
  button    : '.my-btn'
});

4. Enable or disable the shake effect as you add a product to the basket.

$('.items').flyto({
  shake: true
});

---

This awesome jQuery plugin is developed by elmahdim. For more Advanced Usages, please check the demo page or visit the official website.