Wednesday 19 March 2014

Filled Under:

How to create fly to cart / basket effect using jQuery and CSS



          in this post i have explained for your shopping cart projects you can add this very beautifull effect to add to cart here i created add produt in the cart with fly effect.this is a basically an animation of jQuery when you click on any item "add to cart" button thats item fly and take place in your cart.it is a not a complate cart it is a just jQuery animation of fly to cart or basket.




How to use :

this is a simple jQuery code.


<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>

CSS code.

<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>


This code create items or product listing with each images.

<div class="wrapper">
     <h1>Easyscript Shopping</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>

the above given all tutorial very simple and easy to understand you can see live demo or free to download complete source code of all tutorial.




24 comments:

  1. Hello I wonder if it would work in asp.net?

    ReplyDelete
    Replies
    1. Sorry Dear i dont know asp.net in detail i am a php programmer. and also if i got this in asp.net than i will sent to you.
      subscribe on http://easyscript4u.com

      Delete
    2. How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download Now

      >>>>> Download Full

      How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download LINK

      >>>>> Download Now

      How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download Full

      >>>>> Download LINK m4

      Delete
  2. this is a beautiful css effect ! thans for this article!

    ReplyDelete
  3. Great Information sir.
    thanks
    Read about technology here
    hire php developers india

    ReplyDelete
  4. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    google-cloud-platform-training-in-chennai

    ReplyDelete
  5. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    Devops Training in Chennai

    ReplyDelete
  6. It is better to engaged ourselves in activities we like. I liked the post. Thanks for sharing.python training in OMR
    python training in Bangalore
    python training in rajajinagar

    ReplyDelete
  7. Thank you for sharing such great information with us. I really appreciate everything that you’ve done here and am glad to know that you really care about the world that we live in
    Blueprism online training

    Blue Prism Training in Pune

    ReplyDelete
  8. This is a nice article here with some useful tips for those who are not used-to comment that frequently. Thanks for this helpful information I agree with all points you have given to us. I will follow all of them.

    Data Science training in Chennai
    Data science training in bangalore
    Data science training in pune

    ReplyDelete
  9. You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us
    java training in chennai | java training in bangalore

    java online training | java training in pune

    ReplyDelete
  10. I look forward to fresh updates and will talk about this blog with my Facebook group. Chat soon!
    iosh course in chennai

    ReplyDelete
  11. Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials…
    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  12. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks
    Java training in Chennai

    Java Online training in Chennai

    Java Course in Chennai

    Best JAVA Training Institutes in Chennai

    Java training in Bangalore

    Java training in Hyderabad

    Java Training in Coimbatore

    Java Training

    Java Online Training


    ReplyDelete
  13. How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download Now

    >>>>> Download Full

    How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download LINK

    >>>>> Download Now

    How To Create Fly To Cart / Basket Effect Using Jquery And Css ~ Website Development >>>>> Download Full

    >>>>> Download LINK tJ

    ReplyDelete