• Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Home
CSS

Create fly to cart / basket effect for eCommerce using jQuery and CSS

June 17th, 2025 Huzoor Bux CSS, HTML, jQuery 0 comments

Facebook Twitter Google+ LinkedIn Pinterest
Create fly to cart / basket effect for eCommerce using jQuery and CSS

I have found a very useful code snippet on codepen for eCommerce sites ad to cart fly effect and really loved it so decided to write on that for my readers. Its a jQuery based code and very simple to use giving you a demo and download code for testing so you can easily implement it.

 

DEMO
DOWNLOAD CODE

Note: Its not a complete cart its only animation of fly to cart / basket

How to use it:

This is a simple jQuery script you can use it easily.

<script>

    $('.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()

            });

        }

    });

</script>

When you click on add to cart button it took that item image and change its size and opacity and animate it to cart icon area and hide image and shake basket.

CSS used for this tutorial to make it looks nice:

<style>

    * {

    margin: 0;

    padding: 0;

}

body {

    background-color: #F2EEE9;

    font: normal 13px/1.5 Georgia, Serif;

    color: #333;

}

.wrapper {

    width: 705px;

    margin: 20px auto;

    padding: 20px;

}

h1 {

    display: inline-block;

    background-color: #333;

    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;

}

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 #722A1B;

    padding: 4px 14px;

    background-color: #fff;

    color: #722A1B;

    text-transform: uppercase;

    float: right;

    margin: 5px 0;

    font-weight: bold;

    cursor: pointer;

}

span {

    float: right;

}

.shopping-cart {

    display: inline-block;

    background: url("shoping_cart1.png") no-repeat 0 0;

    width: 24px;

    height: 24px;

    margin: 0 10px 0 0;

}

</style>

CSS used for beautification.

HTML

Below markup create cart items listing with images make sure that you are using same class if want to change then must change in your jQuery script.

<div class="wrapper">

     <h1>PHPGang Store</h1>

    <span><i class="shopping-cart"></i></span>



    <div class="clear"></div>

    <div class="items">

        <div class="item">

            <img src="item1.jpg" alt="item" />

             <h2>Item 1</h2>



            <p>Price: <em>$1449</em>

            </p>

            <button class="add-to-cart" type="button">Add to cart</button>

        </div>

        <div class="item">

            <img src="item2.jpg" alt="item" />

             <h2>Item 2</h2>



            <p>Price: <em>$649</em>

            </p>

            <button class="add-to-cart" type="button">Add to cart</button>

        </div>

    </div>

</div>

All done now you have to run the code and see effects.

I hope you like it please feel free to ask question in below comments section.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article 7 Reasons PHP is Still So Important For Web Development
Previous article Drag and drop multiple file upload using jQuery, Ajax, and PHP

Huzoor Bux

I am a PHP Developer

Related Posts

How to Create PDFs from HTML with PHP and Dompdf HTML
June 18th, 2025

How to Create PDFs from HTML with PHP and Dompdf

How to Convert HTML to PDF in PHP with fpdf HTML
June 17th, 2025

How to Convert HTML to PDF in PHP with fpdf

Skeleton Screen Loading Animation using HTML and CSS CSS
June 17th, 2025

Skeleton Screen Loading Animation using HTML and CSS

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe
Get new posts by email:
Powered by follow.it
Advertisement
Like us
Recent Posts
  • 9 Best Programming languages you should learn in 2021
  • What is Progressive Web Applications and Why Create a PWA?
  • 7 HTML attributes that you must learn today!
  • Why Use MongoDB and When to Use It?
  • Introduction to Git for version control
Categories
  • API
  • Bootstrap
  • Bot
  • CSS
  • CSS 3
  • Database
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • Laravel
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • Web 3.0
  • WordPress
Weekly Tags
  • PHP
  • How to
  • javascript
  • laravel
  • MYSQL
  • PHP framework
  • css
  • jQuery
  • HTML to PDF
  • Web Development
  • About
  • Privacy Policy
  • Back to top
© PHPLift.net. All rights reserved.