JSFiddle - React, Tailwind, and code Playground

by Clayton Bradley-Phillips

HTML

<div class="bodyBG"></div>
<div id="qtext"></div>

CSS

.bodyBG {
    height:100%;
    width:100%;
    position: fixed;
    top:0;
    left:0;
    background-color:blue;
    z-index:0;
}
#qtext {
    position: absolute;
    z-index:10;
}

JavaScript

$(document).ready(function(){
var images = ['red','blue','green','purple','yellow'];

var quotes = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png'];


setInterval(function(){

    var random = Math.floor(Math.random()*5);
    var disquote = quotes[random];
    var bg = $.inArray(disquote, quotes);
    
    $(".bodyBG").fadeOut(1000,
         function () {
            $('#qtext').html(disquote);
            $(this).css('background-color', images[bg] );
            // Animation complete.
            $(this).fadeIn(1000);
        });
}, 1000);
});