A Star Wars Parallax with Multiple Backgrounds

In preparation for the upcoming “Star Wars: Rogue One” film 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.

Despite our Star Wars theme, there is value in using parallax and in some cases, using parallax with multiple backgrounds. Parallax makes scrolling through your website seamless by creating a depth and transition effect when scrolling down, thus enhancing the user experience (UX). Although parallax is a definite value-add when implemented appropriately, it’s important not to use it too much as it deflates the effect the more it is used on your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 — star_wars_parallax.html

Copy and paste the HTML below into your web page

<div id="intro">
<div class="story">
<div class="float-left">
<h2>Star Wars: A New Parallax</h2>
<p><p>In preparation for the upcoming "Star Wars: Rogue One" 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, 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>
<!--#third-->

Step 2 — star_wars_parallax.js

Copy and paste the JavaScript below into a new file and include it in your web page.

$(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);
})

Step 3 — star_wars_parallax.css

Download the CSS below and include it in your web page

star_wars_parallax.css

Step 4 — Include the following resources on your web page

<link href="star_wars_parallax.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<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>
<script src="star_wars_parallax.js"></script>

In this article, Solodev showed how to add parallax with multiple backgrounds to your website in a Star Wars themed post. Feel free to swap out the images in our tutorial with those appropriate to your website.

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.