JSFiddle - React, Tailwind, and code Playground

by niteshkhanna

HTML

<body onload="init();">
    <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="cloud-01"><img src="http://i1081.photobucket.com/albums/j343/niteshkhanna89/surface.jpg">
  <div id="car"><img src="http://i1081.photobucket.com/albums/j343/niteshkhanna89/car5.jpg">

CSS

#car{ 
  
 width: 0%;  
 height: 0px;  
 top: 50px;  
 left: 55px;  
  position: absolute; 
 
 }

JavaScript

$(window).scroll(function () {
            
    $("#car")
        .animate({rotate:-12},{duration:0.1})
        .animate({"top":"+=8px"},0.200)
           .animate({rotate:-20},{duration:0.100})
        .animate({"top":"+=5px"},2)
        .animate({rotate:-24},{duration:1})
        .animate({"top":"+=3px","left":"-=3px"},2)
            .animate({rotate:-28},{duration:1})
                .animate({"top":"+=5px","left":"-=2px"},2)
                .animate({rotate:-34},{duration:1})
              .animate({"top":"+=3.7px","left":"-=2.5px"},2)
        
                       .animate({rotate:-41},{duration:100}) 
         .animate({ "top":"+=170px","left":"+=180px" }, 4000)
             .animate({rotate:-44},{duration:100}) 
            .animate({ "top":"+=112px","left":"+=128px" }, 4000)
        .animate({ "top":"+=11px","left":"+=10px" }, 1000)
        
               .animate({rotate:-40},{duration:100})
        
                .animate({ "top":"+=3px","left":"+=4px" }, 100)
        
                          .animate({rotate:-36},{duration:100})  
          .animate({ "top":"+=3px","left":"+=4px" }, 100)
        
                          .animate({rotate:-28},{duration:100}) 
          .animate({ "top":"+=3px","left":"+=4px" }, 100)
        
                          .animate({rotate:-20},{duration:100}) 
          .animate({ "top":"+=3px","left":"+=4px" }, 100)
         .animate({ "top":"+=0px","left":"+=3px" }, 100)
             .animate({ "top":"+=1px","left":"+=3px" }, 100) 
        
                .animate({ "top":"+=1px","left":"+=2px" }, 100) 
                   .animate({rotate:10},{duration:100})  
          .animate({ "top":"+=2px","left":"+=3px" }, 100) 
             .animate({rotate:30},{duration:100})  
                .animate({ "top":"+=0px","left":"+=10px" }, 100)
              .animate({rotate:50},{duration:100})
            .animate({ "top":"+=90px","left":"-=120px" }, 1000)
        
        
      

        
        
                       ...