JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<div style="height: 395px !important; margin: 0; padding: 0;">
    <div id="bg">
        <img alt="" src="http://s23.postimg.org/57ac4u6on/3_E856_B223_E7_D8_FEC878534_FFA38_F.jpg" />
        <img alt="" src="http://s23.postimg.org/hczjf8lef/5_B74_A22_CA9222_C2_A2_E68_B7676538_F.jpg" /> 
        <img alt="" src="http://s23.postimg.org/7r5yyxu8n/14osterness_thumbnail.jpg" /></a>

        <img alt="" src="http://s23.postimg.org/94xlu8thz/A06135_EDD56_E60601697_A423_DD3952.jpg" />
        <img alt="" src="http://s23.postimg.org/yrod197x3/band.png" />
    </div>
</div>

CSS

p {
    font-family:Trajan Pro, serif;
    font-size:medium;
    font-weight:bold;
    color:white;
}
h1 {
    font-family:Trajan Pro, serif;
    font-weight:bold;
    font-size:x-large;
    color:white;
    text-align:center;
}
#bg {
    position:absolute;
    z-Index:0;
    top:135px;
}
#bg IMG {
    position:absolute;
    top:0px;
    opacity: -0.001;
}

JavaScript

function zxcAnimate(mde, obj, srt) {
    this.to = null;
    this.obj = typeof (obj) == 'object' ? obj : document.getElementById(obj);
    this.mde = mde.replace(/\W/g, '');
    this.data = [srt || 0];
    return this;
}

zxcAnimate.prototype.animate = function (srt, fin, ms, scale, c) {
    clearTimeout(this.to);
    this.time = ms || this.time || 0;
    this.neg = srt < 0 || fin < 0;
    this.data = [srt, srt, fin];
    this.mS = this.time * (!scale ? 1 : Math.abs((fin - srt) / (scale[1] - scale[0])));
    this.c = typeof (c) == 'string' ? c.charAt(0).toLowerCase() : this.c ? this.c : '';
    this.inc = Math.PI / (2 * this.mS);
    this.srttime = new Date().getTime();
    this.cng();
}

zxcAnimate.prototype.cng = function () {
    var oop = this,
        ms = new Date().getTime() - this.srttime;
    this.data[0] = (this.c == 's') ? (this.data[2] - this.data[1]) * Math.sin(this.inc * ms) + this.data[1] : (this.c == 'c') ? this.data[2] - (this.data[2] - this.data[1]) * Math.cos(this.inc * ms) : (this.data[2] - this.data[1]) / this.mS * ms + this.data[1];
    this.apply();
    if (ms < this.mS) this.to = setTimeout(function () {
        oop.cng()
    }, 10);
    else {
        this.data[0] = this.data[2];
        this.apply();
        if (this.Complete) this.Complete(this);
    }
}

zxcAnimate.prototype.apply = function () {
    if (isFinite(this.data[0])) {
        if (this.data[0] < 0 && !this.neg) this.data[0] = 0;
        if (this.mde != 'opacity') this.obj.style[this.mde] = Math.floor(this.data[0]) + 'px';
        else zxcOpacity(this.obj, this.data[0]);
    }
}

function zxcOpacity(obj, opc) {
    if (opc < 0 || opc > 100) return;
    obj.style.filter = 'alpha(opacity=' + opc + ')';
    obj.style.opacity = obj.style.MozOpacity = obj.style.KhtmlOpacity = opc / 100 - .001;
}

function BGFade(o) {
    var p = document.getElementById(o.ID)
    if (p) {
        var bgs = p.getElementsByTagName('IMG');
        this.bgs = [];
        for (var z0 = 0; z0 <...