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" />
        <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

$(document).ready(function () {
    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...