<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="slide slide1" data-background="rgba(22, 160, 133,1.0)">
<h1>Change Page Background on Scroll</h1>
<p>You should see me in Green Sea.</p>
</div>
<div class="slide slide2" data-background="rgba(211, 84, 0,1.0)">
<h1>You just scrolled down to Slide 2</h1>
<p>I have filled your screen with Pumpkin Organge.</p>
</div>
<div class="slide slide3" data-background="rgba(41, 128, 185,1.0)">
<h1>You are awsome :)</h1>
<p>You are looking at the great Sky.</p>
</div>
<div class="slide slide4" data-background="rgba(192, 57, 43,1.0)">
<h1>That is all folks ....!</h1>
<p>This marks the End of this amazing color show.</p>
</div>