JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" &lt;link href=&#39;http://fonts.googleapis.com/css?family=Quicksand:400,700&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div id="fullPage">
     <h1>Page Title</h1> 
     <h1>Page Title</h1> 
     <h1>Page Title</h1> 
     <h1>Page Title</h1>

     <h1>Page Title</h1> 
     <h1>Page Title</h1> 
     <h1>Page Title</h1> 
     <h1>Page Title</h1>

</div>

CSS

body {
    background-image: url(http://1054.fleeceitout.com/sites/all/themes/jack/images/field.2.jpg);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}
h1 {
    font-family: Quicksand;
    color: #345;
    font-size: 6em;
    font-weight: bold;
    text-shadow: 0 3px 0 #FFD;
}

JavaScript

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5];
    var index = 0;
    var interval = 5000;
    setTimeout(function () {
        $('#fullPage').animate({
            backgroundColor: 'transparent'
        }, 1000);
        $('body').css('backgroundImage', 'url(http://1054.fleeceitout.com/sites/all/themes/jack/images/field.' + img_array[index++ % img_array.length] + '.jpg)');
        $('#fullPage').delay(3000).animate({
            backgroundColor: 'rgb(255,255,255)'
        }, 1000);
        setTimeout(arguments.callee, interval);
    }, interval);
});