JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div id='page'>
    <h2>Content one</h2>
    <h4>Content four</h4>
</div>

CSS

#page {
    position:relative;
    z-index:2;
}
.gridContainer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

.gridItem {
    width:20px;
    height:20px;
    position:absolute;
    opacity:0.0;
}

JavaScript

$m = document.id;
var GridItem = new Class({
    initialize: function(x,y,color){
        this.x = x;
        this.y = y;
        this.color = color;
        this.element = new Element('div.gridItem',{
            styles:{
                top:this.x, left:this.y,
                'background-color':this.color
            }
        });
    },
    toElement: function() {
        return this.element;
    },
    animate:function(maxOpacity) {
        var myFx = new Fx.Tween(this.element, {
            duration: 'long',
            transition: 'linear',
            property: 'opacity'
        });
        myFx.start(0, maxOpacity);
    }
});

var AnimatedBackground = new Class({
    options: {
        boxW:20,
        boxH:20,
        colors:['#f4f4f4','#f7f7f7','#fafafa','#fbfbfb'],
        maxDelay:30000,
        maxOpacity:0.9
    },
    Implements: Options,
    initialize:function(container, options){
        this.container = container;
        this.setOptions(options);
    },
    load: function() {
        var body=$m(document.body);
        body.grab(container,'top');
        var bodyX = body.getSize().x;
        var bodyY = body.getSize().y;
        for(var i=0; i<bodyX;i+=this.options.boxW) {
            for(var j=0; j<bodyY;j+=this.options.boxH) {
                var color = this.options.colors.getRandom();
                this.insertGridItem(j, i, color);
            }
        }
    },
    insertGridItem: function(top, left, color) {
        var delay = Number.random(0,this.options.maxDelay);
        (function(){
            var item = new GridItem(top,left,color);
            this.container.adopt(item);
            item.animate(this.options.maxOpacity);
        }.bind(this)).delay(delay);
    }    
});

var container = new Element('div.gridContainer');
var anim = new AnimatedBackground(container);
anim.load();