JSFiddle - React, Tailwind, and code Playground

by ctwheels

HTML

<body>
    <div class="blue"></div>
     <h2 id="text1">a web design demonstration</h2>

     <h3 id="text2">by cory</h3>

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

CSS

html {
    background-color: black;
    overflow-x: hidden;
}
body {
    display: none;
    background-color: #6e8eb5;
}
#cloud2 {
    margin-top:800px;
    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%;
    text-align:center;
}
.blue {
    position:fixed;
    height: 100%;
    width: 100%;
    background-color: #6e8eb5;
    z-index:-100;
}

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);