Realization of parabola animation effect of adding shopping cart based on jquery fly plug-in _jquery

First to show you the effect of the picture:

In the shopping site, the function of adding a shopping cart is a necessary function, and some sites when users click to add a shopping cart button, it will appear that the merchandise from the click Out to the animation of the parabola to join the shopping cart, this feature looks very cool, the user experience also has some improvement. The following describes the implementation of the add-in-cart parabola animation effect based on the jquery fly plug-in.

Realize the function of parabola animation to join shopping cart when using Jquery.fly plugin conveniently

One, the plugin downloads

Plugin official: Https://github.com/amibug/fly

Second, loading jquery library files and jquery.fly.min.js Plug-ins

<script src= "Jquery.js" ></script> 
<script src= "Jquery.fly.min.js" ></script>

Third, add the shopping cart animation flying effect Example

The effect we want to achieve is: When you click on the "Add To Cart" button, the product image will become a reduced ball, with the button as the starting point, to the right side of the parabola to fly out to the right side of the shopping cart. Before we fly out, we want to get a picture of the current product, and then call the Fly plug-in, and then the parabola trajectory is done by the fly plug-in, we just need to define the start and end of the left and after the destruction of the animation.

<div class= "Container" > <div class= "demo Clearfix" > <div class= "per" >  <div class=" title ">aaa</div> <a href=" javascript:void (0); " class= "button Orange Addcart" > Add Shopping Cart </a> </div> <div class= "per" >  <div class=" title ">bbb</div> <a href=" javascript:void (0); "class=" Button Orange Addcart "> Add Shopping Cart </a> </div> </div> </div> <div class=" Cart-sidebar "> < div class= "cart" > <i id= "icon-cart" ></i> <span> shopping cart </span> </div> </div> < Div id= "Tip" > successfully joined the shopping cart! 
</div> <script> $ (function () {var offset = $ ("#icon-cart"). Offset (); $ (". Addcart"). Click (Function (event) {var img = $ (this). Parent (). Children (' img '). attr (' src ');//Get current click picture link var flyer = $ ('  '); Parabolic Object Flyer.fly ({ 
Start: {left:event.pagex,//parabolic Top:event.pageY//Parabolic start ordinate}, end: {left:offset.left + 10,//parabolic top: Offset.top + 10,//parabolic end ordinate}, Onend:function () {$ ("#tip"). Show (). Animate ({width: ' 200px '},300). fadeout (500); Into the shopping cart animation effect this.destory (); 
Destruction of Parabolic objects}}); 
});
}); <script>

Note

IE10 the following JS needs to be added:

<script src= "Requestanimationframe.js" ></script>

The above mentioned is for the jquery fly plug-in to implement the Parabola animation effect, hope to help everyone!