Product Fly To Cart Effects in jQuery

Submitted by: 
Language: 
Visitors have accessed this post 2162 times.

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.