Star Wars Parallax Backgrounds

Star Wars Parallax Backgrounds

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.localscroll-1.2.7-min.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.parallax-1.1.3.js"></script>
<script src="https://www.solodev.com/assets/parallax/jquery.scrollTo-1.4.2-min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<div id="intro">
   <div class="story">
      <div class="float-left">
         <h2>Star Wars: A New Parallax</h2>
         <p><p>In preparation for the upcoming &quot;Star Wars: Rogue One&quot; the Solodev team decided to write a Star Wars themed post on adding parallax with multiple backgrounds to your website using jQuery ScollTo by Ariel Flesler. Instead of your run of the mill stock photos, our example is filled with Tie Fighters, X-Wings, ATT Walkers, and the Death Star as backgrounds. </p> 
      </div>
   </div>
   <!--.story-->
</div>
<!--#intro-->
<div id="second">
   <div class="story">
      <div class="bg"></div>
      <div class="float-right">
         <h2>The Parallax Strikes Back</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio.</p> 
         <p>Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus. Nulla in pellentesque eros. Donec ultricies, enim vitae varius cursus, risus mauris iaculis neque, euismod sollicitudin metus erat vitae sapien. Sed pulvinar.</p>
      </div>
   </div>
   <!--.story-->
</div>
<!--#second-->
<div id="third">
   <div class="story">
      <div class="float-left">
		<h2>The Return of Parallax</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at,...

CSS

html {
  width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;	
}
p{
        margin: 0 0 20px 0;     
}

p, ul{
        font-family: 'Open Sans Condensed', sans-serif;
        font-size-adjust:0.488;
        font-weight:200;
        font-style:normal;
}

img{
        border: 0;
        width: 100%;
}

h1, #pixels{
        font-family: 'Open Sans Condensed', sans-serif;
        font-size-adjust:0.40;
        font-weight:700;
        font-style:normal;
}

h2{
        font-family: 'Open Sans Condensed', sans-serif;
        font-size-adjust:0.531;
        font-weight:800;
        font-style:normal;
        font-size:45px;
        line-height: 52px;
}

#header h1, #pixels{
        color: #48941A;
}

.float-left{
        float: left;    
        margin: 0 0 0 0px;
}

.float-right{
        float: right;
        margin: 0 0px 0 0;
}

.center{
        font-size: 2.5em;
        padding: 80px 0 0 0;
        text-align: center;
}

#nav{
        list-style: none;
        position: fixed;
        right: 20px;
}

#nav li{
        margin: 0 0 15px 0;     
}

#header, #intro, #second{
        width: 100%;
}

#intro{
        background:url(https://www.solodev.com/assets/Star%20Wars%20Parallax/starwars.jpg) 50% 0 no-repeat fixed;
		    background-size: cover;
        color: white;
        height: 600px;
        margin: 0 auto;
        padding: 0;
        width: 100%;
}

#second{
	      background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/starwars1.jpg) 50% 0 no-repeat fixed;
		    background-size: cover;
        color: white;
        height: 1300px;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;
        width: 100%;
}

#second .bg{
	      background: url(https://www.solodev.com/assets/Star%20Wars%20Parallax/deathstar-white.png) 50% 500px no-repeat fixed;
        height: 1300px;
        margin: 0 auto;
        padding: 0;
        position: absolute;
        left: 0;
        z-index: 200;
        max-width: 1900px;
		    width: 100%;
     ...

JavaScript

$(document).ready(function(){
	$('#nav').localScroll(800);
	
	//.parallax(xPosition, speedFactor, outerHeight) options:
	//xPosition - Horizontal position of the element
	//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
	//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
	$('#intro').parallax("50%", 0.1);
	$('#second').parallax("50%", 0.1);
	$('.bg').parallax("0%", 0.3);
	$('#third').parallax("50%", 0.3);

})