Product Fly To Cart Effects in jQuery

In this tutorial we will teach how to create a flying effects of products or images through the cart. This project we will create named Products Fly To Cart Effects. This tutorial will help you to provide better user interface for your eCommerce web application using the shopping cart. To run the effects of the application we use jQuery fly to cart effect. Our jQuery fly to Cart script helps you to implement flying images or products effect while products are added to the shopping cart.

Sample Code

For the HTML Form.
  1. <div class="col-lg-12">
  2. <div class="row"><a class="cart_anchor"></a></div>
  3. </div>
  4. <h1>&nbsp&nbspDelivery Product</h1><hr/>
  5. <div class="col-lg-12">
  6. <div class="row">
  7. <div class="col-sm-4 col-lg-4 col-md-4">
  8. <div class="thumbnail">
  9. <img src="images/deliv1.png" alt="">
  10. <div class="caption">
  11. <h4 class="pull-right">&#x20B1;1000</h4>
  12. <h4><a href="javascript:void(0);">Product Delivery 1</a></h4>
  13. <p>Details for products to deliver.</p>
  14. </div>
  15. <a href="javascript:void(0);" class="btn btn-success add-to-cart">Add To Cart</a>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
resultFor the javascript to make the image or product fly through the cart
  1. function flyToElement(flyer, flyingTo) {
  2. var $func = $(this);
  3. var divider = 3;
  4. var flyerClone = $(flyer).clone();
  5. $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
  6. $('body').append($(flyerClone));
  7. var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
  8. var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
  9.  
  10. $(flyerClone).animate({
  11. opacity: 0.4,
  12. left: gotoX,
  13. top: gotoY,
  14. width: $(flyer).width()/divider,
  15. height: $(flyer).height()/divider
  16. }, 700,
  17. function () {
  18. $(flyingTo).fadeOut('fast', function () {
  19. $(flyingTo).fadeIn('fast', function () {
  20. $(flyerClone).fadeOut('fast', function () {
  21. $(flyerClone).remove();
  22. });
  23. });
  24. });
  25. });
  26. }
Hope that you learn in this project and enjoy coding. Don't forget to LIKE & SHARE this website.

Add new comment