JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blue">
    </div>

  <center>
    <h2 id="text1" >a web design demonstration</h2>
    <h3 id="text2" >by cory</h3>
    </center>


    <div id="blueSky">
    </div>

    <img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">

<img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">

CSS

html {
	background-color: black;
	overflow-x: hidden;
}
body {
	display: none;
}
#blueSky {
	height: 800px;
}
#cloud2 {
    margin-bottom: -400px;
    left: -100px;
    height:150px;
    opacity: 0.4;
}
#text1, #text2 {
	opacity: 0.0;
	color: black;
	font-family: Georgia, serif;
	color: white;
	position: fixed;
	margin-bottom: 200px;
	width: 75%;
	left: 50%;
	margin: 0 0 0 -37.5%;
}
.blue {
	position:fixed;
	height: 100%;
	width: 100%;
	background-color: #6e8eb5;
}

JavaScript

$("body").fadeIn(2000);

	$("html, body").animate({ scrollTop: $(document).height() }, 8000);

	$( "#cloud2" ).animate({
	    opacity: 0.8,
	    marginLeft: "110%",
	}, 30000 );

	$( "#text1" ).delay( 1500 ).animate({
	    opacity: 0.5,
	    marginTop: "15%",
	}, 4000 );
	$( "#text2" ).delay( 5000 ).animate({
	    opacity: 0.5,
	    marginTop: "20%",
	}, 4000 );
	$( "#text1" ).delay( 500 ).animate({
	    opacity: 0.0,
	    marginLeft: "60%",
	}, 2000 );
	$( "#text2" ).delay( 1500 ).animate({
	    opacity: 0.0,
	    marginLeft: "30%",
	}, 2000 );

	$( ".blue" ).delay( 12000 ).fadeOut(2000);