• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • 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 25th, 2018 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 Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article HTML based swipe Tabs for mobile / touch devices
Previous article 8 Best PHP Frameworks Of 2017 For Developers

Huzoor Bux

I am a PHP Developer

Related Posts

How to Create PDFs from HTML with PHP and Dompdf HTML
June 29th, 2022

How to Create PDFs from HTML with PHP and Dompdf

How to Convert HTML to PDF in PHP with fpdf HTML
February 28th, 2022

How to Convert HTML to PDF in PHP with fpdf

Make Country, State and City Dropdown with REST API & jQuery API
February 27th, 2022

Make Country, State and City Dropdown with REST API & jQuery

Leave a Reply Cancel reply

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

    Advertisement
    Like us
    Recent Posts
    • How to Create PDFs from HTML with PHP and Dompdf
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    • How to Create Bar Chart Race in JavaScript
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • HTML to PDF
    • PHP Basics
    • Programming Habits
    • HTML5
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.