JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Parallax Example </title>
</head>
<body>
<div id="sky">
    <div id="clouds1"></div>
    <div id="clouds2"></div>
    <div id="rain-cloud"></div>
    <div id="space-ghost"></div>
</div>
<div id="ocean">
    <div id="wave1"></div>
    <div id="wave2"></div>
    <div id="nemo"><img src="http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-nemo.png" /></div>
    <div id="wave3"></div>
    <div id="wave4"></div>
</div>
<div id="instructions">
<h1>CSS3 Animations Demo</h1>
<h2>Hover over the images above to activate the animations.</h2>
</div>
</body>
</html>

CSS

body {
    background: #E1F3FC url(http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-bak-body.png) repeat-x;
}





/* CLOUDS */

#clouds1 {
    position: absolute;
    background: url(http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-clouds1.png) repeat-x;
    top: 0; left: -9999px; bottom: 0; right: 0;
    height: 60px;
}

#clouds2 {
    position: absolute;
    top: 10px; left: -9999px; bottom: 0; right: 0;
    background: url(http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-clouds2.png) repeat-x 0 0;
    height: 90px;
}

body.test #clouds1 {
    left: 9999px;
    -webkit-transition: left 2500s linear;
   
}
body.test #clouds2 {
    left: 9999px;
    -webkit-transition: left 1500s linear;
  
}



/* WAVES */

#wave1, #wave2, #wave3, #wave4 {
    background: url('http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-waves.png') repeat-x;
    height: 80px;
}

#wave1 {
    position: absolute;
    top: 200px; left: -9999px; right: 0; bottom: 0;
}

#wave2 {
    position: absolute;
    top: 230px; left: 0px; right: 0; bottom: 0;
    background-position: 120px 0;
}

#wave3 {
    position: absolute;
    top: 260px; left: -5555px; right: 0; bottom: 0;
}

#wave4 {
    position: absolute;
    top: 300px; left: 0; right: 0; bottom: 0;
    background-position: 120px 0;
}

body.test #wave1 {
    left: 9999px;
    -webkit-transition: left 140s linear;
    
}

body.test #wave2 {
    left: -9999px;
    -webkit-transition: left 160s linear;
   
}

body.test #wave3 {
    left: 9999px;
    -webkit-transition: left 180s linear;
    
}

body.test #wave4 {
    left: -9999px;
    -webkit-transition: left 200s linear;
    
}



/* SPECIAL ANIMATIONS */

#rain-cloud {
    position: absolute;
    top: 25px; left: -200px; bottom: 0; right: 0;
    background: url(http://thecreativeservicesblog.com/wp-content/uploads/2011/10/10-10-2011-rain-cloud.png) no-repeat 0 0;
    height: 125px;
}

body.test...

JavaScript

$(function(){
    $(document.body).addClass('test');
})