JSFiddle - React, Tailwind, and code Playground
HTML
<header id="top" class="header">
<div class="name text-center">
<h1>The name of the site</h1>
<h3>Describe the activity</h3>
</div>
</header>
<section id="about" class="about">
<div class="row">
<div class="col-lg-12 text-center">
<div class="aboutUs">
<h2>Our team</h2>
<p>Our team our team our team</p>
</div>
</div>
<div id="sky"></div>
<div id="ball"></div>
<div id="bird"></div>
</div>
</section>
<section id="news">
<div class="row">
<div class="col-lg-12 text-center">
<h3>Our news Our news Our news</h3>
</div>
</div>
</section>
CSS
.header {
background: cyan;
width: 100%;
height: 400px;
position: relative;
z-index: 1;
}
#news {
background: green;
width: 100%;
height: 400px;
z-index: 1;
}
/*Parallax divs start here*/
#about {
width: 100%;
height: 260px;
}
#sky {
background-image: url("http://static.guim.co.uk/sys-images/Admin/BkFill/Default_image_group/2010/4/19/1271699803562/clear-skies-001.jpg");
background-position: center;
background-repeat: no-repeat;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -10;
}
#ball {
background-image: url("http://c.dryicons.com/images/icon_sets/minimalistica_part_2_icons/png/128x128/rugby_ball.png");
background-position: center;
background-repeat: no-repeat;
height: 100%;
position: fixed;
top: 20px;
left: -50px;
width: 100%;
z-index: -9;
}
#bird {
background-image: url("https://lh6.ggpht.com/d6EATri3wgY-ELQVSsmiwxPJBt2N2YZSIt7l9secrlWuT9IhGI5m31Yxb75SERJplxA=w128");
background-position: center;
background-repeat: no-repeat;
height: 100%;
position: fixed;
top: 45px;
left: 65px;
width: 100%;
z-index: -8;
}
JavaScript
function parallax() {
var bird = document.getElementById("bird");
bird.style.top = window.pageYOffSet+'px';
};
window.addEventListener("scroll", parallax, false);