Fly To Shopping Cart Effect With jQuery - flyto

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.

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.

  • Publication date: 13.11.2017
  • Source