JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<!-- Moving fruits -->
<div id="box">
100
</div>
<div id="box1">
    300
</div>
<div id="box2">
    150
</div>
<div id="box3">
    500
</div>
<div id="bullet">
Score
</div>

CSS

div{
    color: #fff;
    padding:5px;
}
#box{
    position:absolute;
    width:50px;
    height:50px;
    background-color:red;
    left:-100px;
background:url('http://www.applehill.com/wp-content/uploads/2013/07/icon-berries-sm.png');
    background-repeat:no-repeat;
}
#box1{
    position:absolute;
    width:50px;
    height:50px;
    background-color:gray;
    background:url('http://www.rw-designer.com/icon-view/4013.png');
    background-repeat:no-repeat;
}
#box2{
    position:absolute;
    width:50px;
    height:50px;
    background-color:violet;
    left:-100px;
    background:url('http://www.grannsgourmetapples.com/sitebuilder/images/apple_clipart2-34x34.jpg');
    background-repeat:no-repeat;
    
}
#box3{
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
background:url('http://www.gettyicons.com/free-icons/138/fruits/png/48/lime_48.png');
    background-repeat:no-repeat;    
}
#bullet{
    position:absolute;
    top:300px;
    left:300px;
      width:50px;
    height:50px;
    background-color:blue;
}

JavaScript

$('div').click(function(){
    curPos = $(this).position(); 
    $(this).stop();
    $(this).css('top',curPos.top + 300 + 'px');   
        $(this).stop();
});
var pos = $('#box').position().left;
function loop() {
 //moving first div from left to right 
$('#box').css({left:0}); 
    $( "#box" ).animate({ "left": "+=500" }, 12000 , 'linear',
                        function() {loop();
        })
 //moving second div from left to ri+ght
    $('#box1').css({left:"100px"});  
    
    $( "#box1" ).animate({ "left": "+=500px" }, 14000 , 'linear',
                        function() {loop();
        })
    $('#box2').css({left:0}); 
    $( "#box2" ).animate({ "left": "+=500" }, 16000 , 'linear',
                        function() {loop();
        })
 //moving second div from left to right
    $('#box3').css({left:"100px"});  
    
    $( "#box3" ).animate({ "left": "+=500px" }, 18000 , 'linear',
                        function() {loop();
        })
}
    loop();