Ryan Boudreaux presents the final part of his two-part tutorial on implementing parallax scrolling in your web design. A download includes all the demo files used.
This is the second and final segment of the two part series on creating a parallax scrolling website design with a retro vintage "Route 66" theme. The first segment started out with the inspiration and source code used as the foundation for the design, and then reviewed what was changed for the demonstration I created. I also reviewed the HTML5 and CSS3 elements and styles that were used to create the first two sections of the web document file. This segment will wrap up with the final three sections, beginning with Section Three, and review the scripts which are utilized to drive the parallax scrolling features.
Section #3 highlights the use of sprites. I have cut out one of the photos in this background and used it as a sprite. It scrolls at a different speed to the background and the window. Using too many sprites can slow down older computers, and you need to use some clever math to work out their placement on the page.
<!-- Section #3 / Photos -->
<section id="three" class="journal" data-speed="6" data-type="background" data-offsetY="250">
<div class="DelRey" data-type="sprite" data-offsetY="1300" data-Xposition="40%" data-speed="2"></div>
<p>The next step in your... </p>
<p>I have cut out one of the...</p>
<p>Using too many sprites...</p>
</section>A screen capture of the third section is displayed below in Figure B as shown in Google Chrome Version 23.0.1271.64 m:
The id="three" sets the background image to "Route66NeedlesCA.jpg" which is another vintage AAA post card, this one is from the Del Rhea Lodge, in Needles, CA. This section has a data-speed set to "6" compared to the rest of the page, and a data-offsetY set to "250". The sprite is defined by the div with a class equals "DelRey", data-type equals "sprite", data-offsetY equals "1300", data-Xposition equals "40%", and a data-speed equals "2".
Section #4 highlights an HTML5 video element which is embedded into the HTML with the abbreviated code snippet displayed below:
<!-- Section #4 / HTML5 Video -->
<section id="four" class="journal" data-speed="8" data-type="background" data-offsetY="250">
<p>The HTML5 draft...</p>
<p>The background here...</p>
<video controls width="480" data-type="video" data-offsetY="2400" data-speed="1.5">
<source src="video/Hydrocarbon_Man.ogv" type="video/ogg" />
<source src="video/Hydrocarbon_Man.mp4" type="video/mp4" />
<source src="videoHydrocarbon_Man.webm" type="video/webm" />
Your browser does not support the video tag.
The Hydrocarbon Man video is a short one minute PSA by Occidental Petroleum and features all the domestic and household items that rely on hydrocarbon material for their manufacture. And what ultimately it means when all hydrocarbons are taken out of the items that we rely on for our everyday lives.
For more information on the HTML5 Video element check out these recent posts:
- HTML5: Working with the Video element
- How to use HTML 5's video tag
- HTML5 video progresses with Real Time Communications
This section has an id="four"to call the background image "Route66WinslowAZ.jpg", which is another post card, this one from Winslow Arizona, another city along the Route 66 path. It has the class="journal", data-speed="8", data-type="background", and data-offsetY="250". The embedded video element is contained within an HTML5 article, and the text content is contained within a div with a class="textbox".
Section #5 is the final portion of the web page and it features a steel metal background with a small text area and the final "That's All Folks" image which was found on My Facebook Covers. The abbreviated HTML code snippet is displayed below:
<!-- Section #5 / That's All Folks! -->
<section id="five" class="journal" data-speed="8" data-type="background" data-offsetY="250">
<div class="thatsallfolks" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2">
<p> Metal background is similar to...</p>
</div>A screen capture of the fifth section is displayed below in Figure D as shown in Google Chrome Version 23.0.1271.64 m:
Section #5 with id="five" allows the background image "metal.jpg" with style of 90%, bottom no-repeat, and fixed, class="journal", data-speed="8", data-type="background", and data-offsetY="250". The div with class="thatsallfolks" has a data-type="sprite", data-offsetY="-1600", a data-Xposition="50%", and a data-speed="-2", which is styled with the background "url(../img/thats-all-folks.png" 40% 100px no-repeat fixed". And the text content is contained within the article element with a class="textbox".
The script files include functions for document ready, caching the page, the data offset speeds, data type attributes, stored variables, and window scrolling just to name a few. The two script files are called at the bottom of the HTML just before the closing body tag; the calls are displayed in the code snippet below:
<!--[if lt IE 7 ]>
The file"jquery-1.6.1.min.js" is the standard call required for jQuery functions, and the file "script.js" is the custom jQuery written by Richard Shepherd, which I modified just a bit. The jQuery script file includes the following functions as commented below:
- Document ready function
- Cache the window object
- Cache the Y offset and speed of each sprite
- For each element that has a data-type attribute
- Store some variables based on where they are
- When the window is scrolled apply the scroll function
- If the position is in view
- Scroll the background at var speed and the yPos is a negative value because we're scrolling it UP!
- If this element has a Y offset then add it on
- Put together our final background position
- Moving the background
- Check for other sprites in this section
- Cache the sprite
- Use the same calculation to work on how far to scroll the sprite
- Check for any videos that need scrolling
- Cache the video.
Some backgrounds in this tutorial were provided by Picaboo.
All of the web files used in this tutorial are available for download. Open the HTML file in your browser to view how the Route 66 demo uses the parallax scrolling technique described above.
You can also view a short screen-capture video of the demonstration by downloading the file linked here.