JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="bg"><img width="100%" height="100%" border="0" id="backgroundimg" alt="backgroundimg" src="http://www.dkvine.com/games/dkcr/artwork/palmtrees.jpg" style="display: inline; opacity: 1;"></div>
<div class="cloud"></div>

CSS

.bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:auto;
    overflow-y:hidden;
    z-index:-1;    
}

.cloud {
    background:url("http://vospascal.nl/cloud.png");
    width:913px;
    height:718px;
    position:absolute;
    top:0px;
    left:-385px;
    z-index:-1;

}    

body{    overflow:hidden;}

JavaScript

function getRand(l,u) {
    return Math.floor(Math.random() * (u-l) + l);
}
function aniCloud(){
    var dw = $("html").width();
    var dh = $("html").height();
    var cw = $(".cloud").width();
    var ch = $(".cloud").height();
    var cRand = getRand(20000,50000); //Time in milliseconds it takes the cloud to go across the screen.
    var cBackRand = getRand(0,0); //Time in milliseconds it takes the now hidden cloud to go back across the screen. Times set low for this example. 
    //var divRandY = getRand(-500,(dh+ch)); //Randomizes where the div starts relative to the top of the page.               
    var divRandY = 000; //Randomizes where the div starts relative to the top of the page.
            
    $(".cloud").animate({left:"+="+(dw+cw)+"px",top:"+="+divRandY+"px"},cRand,'linear');
    $(".cloud").fadeOut("slow");
    $(".cloud").animate({left:"-="+(dw+cw)+"px",top:"-="+divRandY+"px"},cBackRand,'linear');
    $(".cloud").fadeIn("slow",aniCloud);
}
    
$(document).ready(function() {
    aniCloud();
});