Tutorial Title Image

U.S. Route 66 (US 66 or Route 66), also known as the Will Rogers Highway and colloquially known as the Main Street of America or the Mother Road, was a highway within the U.S. Highway System. One of the original U.S. Highways, Route 66 was established on November 11, 1926—with road signs erected the following year.
The highway, which became one of the most famous roads in America, originally ran from Chicago, Illinois, through Missouri, Kansas, Oklahoma, Texas, New Mexico, and Arizona before ending at Los Angeles, California, covering a total of 2,448 miles (3,940 km). It was recognized in popular culture by both a hit song and the Route 66 television show in the 1960s.

This tutorial uses the GitHub code for parallax scrolling as a template, 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.
The background image for this section 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.

Background Slide

In this section 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 this lovely parallax effect.

The background here is a vintage AAA post card of the Clark Motel along Route 66 in Pasadena, CA, date unknown.

Scrolling Sprites

The next step in your parallax scrolling adventure is to create some sprites!

I have cut out one of the photos in this background and use it as a sprite. It scrolls at a different speed to the background and the window, and it's this effect that's used so well on Nike Better World and other parallax sites..

Using too many sprites can slow down older computers, and you need to use some clever maths (and trial & error!) to work out their placement on the page.

The background here is another vintage AAA post card, this one of the Del Rhea Lodge along Route 66 in Needles, CA, date unknown.

HTML5 Video

The HTML5 draft specification introduced the video element for the purpose of playing videos or movies, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web without plug ins, but has been hampered by lack of agreement as to which video formats should be supported in web browsers.

Source: HTML5 Video Wiki

The background here is a post card from Winslow, AZ, another city along the famous Route 66.

Metal background is similar to that found on many trucks that traversed the famous Route 66 over its long history.

"That's All Folks" image by Facebook Covers