JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id='header'>
</div>

<div id="header-2"></div>

CSS

#header, #header-2 {
    background-image: url('http://www.htmldrive.net/edit_media/2010/201009/20100906/example/bg-clouds.png');
    background-repeat: repeat-x;
    height: 180px;
}

JavaScript

//animated background horizantally 
(function($) {
    $.fn.scrollingBackground = function(options) {
        // settings and defaults.
        var settings = options || {};
        var speed = settings.speed || 1;
        var step = settings.step || 1;
        var direction = settings.direction || 'rtl';
        var animStep;
        
        // build up a string to pass to animate:
        if (direction === 'rtl') {
            animStep = "-=" + step + "px";
        }
        else if (direction === 'ltr') {
            animStep = '+=' + step + "px";
        }
        
        var element = this;
        
        // perform the animation forever:
        var animate = function() {
            element.animate({
                backgroundPosition: animStep + " 0px"
            }, speed, animate);            
        };
        animate();
    };
})(jQuery);

$("#header").scrollingBackground({
    speed: 50,
    step: 50,
    direction: 'ltr'
});

$("#header-2").scrollingBackground({
    speed: 1,
    step: 1,
    direction: 'rtl'
});