Ryan Boudreaux explains the code behind achieving the parallax scrolling effect on your website. Part 1 of this two-part series covers the first two sections of code.
Several months ago, I reviewed the history of parallax scrolling and displayed several examples of websites that utilize the parallax technology in the post, "How the parallax effect is used in web design". Today I will review the foundation and steps required to create your own website utilizing the parallax scrolling technology, while incorporating a retro vintage "Route 66" theme. Inspiration for this tutorial is credited to Richard Shepherd and his GitHub code for parallax scrolling, Chris Coyier's parallax background demonstration, Juan Pablo Sarmiento's One Page Website, Vertical Parallax demonstration, and Nike Better World. Please note that the GitHub code is provided under an MIT License, and is provided as is with no implied warranty or support, however, permission is granted to use the "software" free of charge, without restriction or limitations.
While there are several methods that can be used to implement the parallax scrolling effect,
I will be using the GitHub code for parallax scrolling by Shepherd as a template in this demonstration, and will utilize the layered method for most of the functionality, where multiple background images will be set to move independently in a vertical fashion and will be composites on one another.
What I modified
Using the GitHub code from Richard Shepherd as a base template, along with the HTML5 Boilerplate for HTML and CSS, what I've done for this tutorial is create a "Route 66" theme replacing the original images with my own, including a vintage road map, several vintage AAA post cards of motels along the famous route, several backgrounds, and some png image files for titles. I've also modified the CSS3 with some text-shadow, box-shadow, radius, and border-radius settings.
This tutorial will utilize the following technologies, and basic user knowledge of each will aid in understanding the concepts:
The HTML5 and CSS3
Our first step is to set up the HTML5 web document code which consists of six sections, and each section contains articles, divisions, headers, and content including text, images, and an embedded video reference. The basis for our index.html file utilized in this demonstration is taken from the HTML5 boilerplate for a rock solid default starting place.
A snippet including the <head> of the HTML5 code is displayed below:
<html class="no-js" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML5 and CSS">
<meta name="author" content="Ryan Boudreaux, TechRepublic Web Developer Blog">
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
Notice that I have included Google Web Fonts for "Lobster Two", "Jacques Francois", "Orienta", and "Oxygen+Mono". These will show up as separate CSS files when viewed under the hood using Google Inspect Element, or other view source tools. There are also two CSS files linked and they are the "style.css" and the "reset.css" which is part of the HTML5 Boilerplate.
All content is enclosed within a "main" div container with an id equals to "main" and a role equals to "main". And within the main container we have five sections, each listed independently with their own styles.
Section #1 starts the introduction with the id of "one", a class of "journal", scrolling data-speed of "8" (compared to the rest of the page), and the data-type set to "background". The div within this section has a class of "titleScroll" a data-type of "sprite" with a data-offsetY of "100", a data-Xposition of "50%", and the data-speed set to "-10" compared to the background of the page. I've copied an abbreviated code snippet of Section #1 here:
<!-- Section #1 / Intro -->
<section id="one" class="journal" data-speed="8" data-type="background">
<div class="titleScroll" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-10"></div>
<img src="img/tutorial-title.png" alt="Tutorial Title Image" width="300" height="86" />
<p class="contentBox">U.S. Route 66 (US 66 or Route 66), also...</p>
<p class="contentBox">The highway, which became one of the most...</p>
</section>A screen capture of the first section is displayed below in Figure B as shown in Google Chrome Version 23.0.1271.64 m:
The id="one" calls from the stylesheet for the background image "VintageMapWesternUS.jpg" and the background is set to 50% 0 no-repeat fixed. This background image is a snapshot of an old American Oil map of the Western United States from the 1960's which starts the "Route 66" theme I am using in this demonstration. The "Route 66" banner is the image file "Route66.png" which is called from the class="titleScroll", and the "Tutorial" title is the image file "tutorial-title.png" called from the HTML as displayed in the snippet above. The three text content boxes in the first section are given a class of "contentBox" which is styled with the purple grain background, a border, border radius, and box-shadow effects.
In Section #2 we are sliding the background at a data speed equal to "5" compared to the rest of the page. As this text box is scrolling at the same speed as the page, and faster than the background, it creates the charming parallax effect.
<!-- Section #2 / Background Only -->
<section id="two" class="journal" data-speed="5" data-type="background">
<p>In this section we are...</p>
<p>As this text box is...</p>
</section>A screen capture of the second section is displayed below in Figure C as shown in Google Chrome Version 23.0.1271.64 m:
The id="two" in section #2 sets the background image "Route66California.jpg" which is a vintage AAA post card of the Clark Motel along Route 66 in Pasadena, CA. The class="journal" sets the height to "1000px", padding and margin to "0", width to "100%", maxwidth to "1920px", position relative, margin to "0" and "auto", and includes styles for a border-top, border-bottom, and a box-shadow.
The next segment of this tutorial will add in the subsequent three sections and describe the scripts utilized in creating some of the parallax scrolling features. And a download of the web files will be provided at the end of the demonstration and tutorial.