"parallax"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> </head> <body> <div id="parallax-bg-3" class="parallax-bg"> <div id="bg-3-1"></div> <div id="bg-3-2"></div> <div id="bg-3-3"></div> <div id="bg-3-4"></div> </div> <div id="parallax-bg-2" class="parallax-bg"> <div id="bg-2-1"></div> <div id="bg-2-2"></div> <div id="bg-2-3"></div> <div id="bg-2-4"></div> <div id="bg-2-5"></div> <div id="bg-2-6"></div> </div> <div id="parallax-bg-1" class="parallax-bg"> <div id="bg-1-1"></div> <div id="bg-1-2"></div> <div id="bg-1-3"></div> <div id="bg-1-4"></div> <div id="bg-1-5"></div> </div> </body> </html>
body{ background:rgba(230,231,232,1); height:4600px; } /* foreground (balloons/landscape)*/ div#parallax-bg-1{ position: fixed; width: 1200px; top: 0; left: 50%; margin-left: -600px; z-index: 1; } /* background middle layer*/ div#parallax-bg-2{ position: fixed; width: 1200px; top: 0; left: 50%; margin-left: -600px; z-index: 2; } /* background layer */ div#parallax-bg-3{ position: fixed; width: 960px; top: 0; left: 50%; margin-left: -470px; z-index: 3; } /* foreground */ div#parallax-bg-3 div{ background-repeat:no-repeat; position:absolute; display:block; overflow:hidden; } div#bg-3-1{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png'); width:529px; height:757px; top:-100px; right:100px; } div#bg-3-2{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png'); width:603px; height:583px; top:1050px; right:70px; } div#bg-3-3{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png'); width:446px; height:713px; top:1800px; right:140px; } div#bg-3-4{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png'); width:1104px; height:684px; top:2800px; right:0px; } /* middle layer clouds */ div#parallax-bg-2 div{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png'); background-repeat:no-repeat; position:absolute; display:block; width:488px; height:138px; overflow:hidden; } div#bg-2-1{ top:100px; left:-310px; } div#bg-2-2{ top:270px; right:-70px; } div#bg-2-3{ top:870px; left:-300px; } div#bg-2-4{ top:1120px; right:-130px; } div#bg-2-5{ top:1620px; left:140px; } div#bg-2-6{ top:720px; left:340px; } /*background layer clouds */ div#parallax-bg-1 div{ background-repeat:no-repeat; position:absolute; display:block; width:488px; height:138px; overflow:hidden; } div#bg-1-1{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png'); top:200px; right:450px; } div#bg-1-2{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png'); top:420px; left:0px; } div#bg-1-3{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png'); top:850px; right:-290px; } div#bg-1-4{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png'); top:1350px; left:200px; } div#bg-1-5{ background:url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png'); top:1200px; left:-200px; }
/* See https://codepen.io/MarcelSchulz/full/lCvwq The effect doens't appear as nice when viewing in split view :-) Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax). */ jQuery(document).ready(function(){ $(window).scroll(function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg-1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg-2').css('top',(0-(scrolled*.4))+'px'); $('#parallax-bg-3').css('top',(0-(scrolled*.75))+'px'); } });

Related: See More

Awesome Landing Page
parallax image scrolling
Parallax Login Form

Questions / Comments: