Create a coins animation like the animation in temple run using CSS3 and Javascript

css, html, javascript, jquery

Solution

Why not simply use JQuery animate? http://jsfiddle.net/KeeB2/2/

$cart = $(".cart");
$("button").on("click", function(){
    $btn = $(this);
    var $coin = $('<div class="coin">')
        .insertAfter($btn)
        .css({
            "left": $btn.offset().left,
            "top": $btn.offset().top
        })
        .animate({
            "top": $cart.offset().top,
            "left": $cart.offset().left
        }, 800, function() {
            $coin.remove();
        });
});​

With this method you can also use CSS Animations to enhance coins behavior while they are flying to the basket.

Problem

I am trying to create a coins animation like the animation in temple run using css3 and javascript i tried to replicate the animation using transition in css3 but i am not able to achieve the same is their any example which has the same animation in the web? or can any one help me to achieve the animation. Update: On click of a button i want some coins to emerge from the button and get collected into a basket (the buttons can be anywhere in the page and the basket fixed at the bottom) Achieved using css3 transitions and jquery Html ``` <button id="btn1">button1</button> <div id="1" class="coin"></div> <div id="2" class="coin"></div> <div id="3" class="coin"></div> <div id="4" class="coin"></div> <div id="basket"></div> </div>​ ``` Css ``` .coinanim{ top:420px; left: 430px; width:50px; height:50px; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition-delay: .36s; -webkit-transition-delay: .36s; } ``` Jquery ``` $('#btn1').click(function(){ $('.coin').css('opacity',1); $('#1').addClass('coinanim1'); $('#2').addClass('coinanim2'); $('#3').addClass('coinanim3'); $('#4').addClass('coinanim4'); }); $('.coin').on('webkitTransitionEnd',function(){ $('.coin').css('opacity',0); $('.coin').attr('class','coin'); }); ``` demo: http://jsfiddle.net/dA42n/23/

Original source