How we can create a product fly and add to cart effect using JavaScript? Solution: Check out this jQuery Fly To Cart Effect With CSS, Add to Cart UI Design.
Previously I have shared an add to cart program using PHP, but this is just a UI design concept. Basically, this is a user interaction design for how a product animate in add to cart action. This is very common in e-commerce now, different sites have different animation effect.
Today you will learn to create add to cart animation UI design. There are some dummy products and a shopping cart icon, when we click on add to cart then the product goes to cart with a fly animation effect. And also the cart moves left-right after product add, the whole things create a good fly to cart effect.
So, Today I am sharing jQuery Fly To Cart Effect With CSS. I have used jQuery and jQuery UI library to create this, as you know jQuery is a JS library that’s why I am putting this in JavaScript category. This is also a responsive design so, it will also fit on your mobile screen size. I think it will be very useful if you are a web designer or developer.
If you are thinking now how this effect actually is, then see the preview given below.
Preview Of Responsive Add To Cart UI Design
See this video preview to getting an idea of how this add to cart design looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- JavaScript Email Validation
- Inline Select Option Dropdown
- jQuery Circular Progress Bar
- CSS Star Rating With jQuery
jQuery Fly To Cart Effect With CSS Source Code
Before sharing source code, let’s talk about it. First I have created a main div and put a heading, a shopping cart icon, and items, inside items I have placed title price and a button. Also, I have placed images with linking from third-party websites. And in the HTML file put all the external files like jQuery, jQuery UI, jQuery UI CSS, etc.
Now using CSS I have placed all the elements on the right place. For shopping cart icon I have used a PNG image to creating that and placed using CSS commands. As you know this is a responsive design, for that I have used CSS @keyframe property, and many more things have been done using CSS.
Now there I have used jQuery UI library (get) to create that effect easily. Using JS create the effect fly to cart and there is also a shake effect after adding the product. There we have pre-built functions to create the program, that’s why we use libraries. All the things you will understand after getting the codes.
For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Fly To Cart Effect | Webdevtrick.com </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <div class="wrapper"> <h1>Buy Phone Online</h1> <span><i class="shopping-cart"></i></span> <div class="clear"></div> <div class="items"> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/71JJB8w5erL._SL1500_.jpg" alt="item" /> <h2>Samsung Note 10</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/51QlMs%2BEnQL._SL1000_.jpg" alt="item" /> <h2>Huawie P30 pro</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/51sl-z1S1dL._SL1500_.jpg" alt="item" /> <h2>Samsung S10</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/512xYZ5OjGL._SL1000_.jpg" alt="item" /> <h2>OnePlus 7</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/61cWoqY8uwL._SL1137_.jpg" alt="item" /> <h2>Nokia 7</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> <div class="item"> <img src="https://images-na.ssl-images-amazon.com/images/I/51opJo00PqL._SL1052_.jpg" alt="item" /> <h2>LG V40</h2> <p>Price: <em>$999</em> </p> <button class="add-to-cart" type="button">Add to cart</button> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap'); * { margin: 0; padding: 0; } body { background-color: #F2EEE9; font-family: 'Lexend Deca', sans-serif; color: #333; } .wrapper { width: 705px; max-width: 100%; margin: 20px auto; padding: 20px; } h1 { display: inline-block; background-color: #f17502; color: #fff; font-size: 20px; font-weight: normal; text-transform: uppercase; padding: 4px 20px; float: left; } .clear { clear: both; } .items { display: block; margin: 20px 0; } .item { background-color: #fff; float: left; margin: 0 10px 10px 0; width: 205px; padding: 10px; height: 290px; } .item img { display: block; margin: auto; max-width: 200px; max-height: 200px; } h2 { font-size: 16px; display: block; border-bottom: 1px solid #ccc; margin: 0 0 10px 0; padding: 0 0 5px 0; } button { border: 1px solid #f17502; padding: 4px 14px; background-color: #fff; color: #f17502; text-transform: uppercase; float: right; margin: 5px 0; font-weight: bold; cursor: pointer; } span { float: right; } .shopping-cart { display: inline-block; background: url('https://webdevtrick.com/wp-content/uploads/cart.png') no-repeat 0 0; width: 24px; height: 24px; margin: 0 10px 0 0; } @media (max-width: 765px) { span { float: none; margin: 0 auto; } .item { width: 85%; } .shopping-cart { float: right; padding-right: 25px; } h1 { font-size: 14px; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
$('.add-to-cart').on('click', function () { var cart = $('.shopping-cart'); var imgtodrag = $(this).parent('.item').find("img").eq(0); if (imgtodrag) { var imgclone = imgtodrag.clone() .offset({ top: imgtodrag.offset().top, left: imgtodrag.offset().left }) .css({ 'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100' }) .appendTo($('body')) .animate({ 'top': cart.offset().top + 10, 'left': cart.offset().left + 10, 'width': 75, 'height': 75 }, 1000, 'easeInOutExpo'); setTimeout(function () { cart.effect("shake", { times: 2 }, 200); }, 1500); imgclone.animate({ 'width': 0, 'height': 0 }, function () { $(this).detach() }); } }); |
That’s It. Now you have successfully created jQuery Fly To Cart Effect With CSS, Add to Cart UI Design Concept. If you have any doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
Man, i love your site
Please use vanilla js Everyone doesn’t use jquery and it also in vanilla it’s easy to understand the logic.
Good Work,
please i’m interested in learning how to code
you can reach me via whatsapp.
+2348147569109.
thank you
This isn’t your code.