JSFiddle - React, Tailwind, and code Playground

by krishnathota

HTML

<div class="clouds"></div>

CSS

body{background:#fff}
.clouds{background:#3e83c8 url(http://www.queness.com/resources/html/bgscroll/images/bg_clouds.png) repeat 0 bottom;width:300px;height:300px;margin:10px;border:2px solid #ccc;}

JavaScript

var scrollSpeed = 70;
    
    // set the default position
    var currenth = 0;
var currentv = 0;

    // set the direction
    var direction = 'h';

    function bgscroll(){

        // 1 pixel row at a time
        currenth += 1;
        currentv -= 1;
   
        // move the background with backgrond-position css properties
      $('div.clouds').css("backgroundPosition",currenth+"px "+ currentv + "px");  
    }

    //Calls the scrolling function repeatedly
     setInterval(bgscroll, scrollSpeed);