Apps

Tutorial: How to implement the parallax scrolling effect, part 2

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 Three

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>
    <article>
      <h2>Scrolling Sprites</h2>
        <div class="textbox">
          <p>The next step in your... </p>
          <p>I have cut out one of the...</p>
          <p>Using too many sprites...</p>
        </div>
    </article>
  </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:

Figure B

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 Four

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">
    <article>
      <h2>HTML5 Video</h2>
        <div class="textbox">
         <p>The HTML5 draft...</p>
         <p> Source:...</p>
         <p>The background here...</p>
        </div>
    </article>
   <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.
    </video>
  </section>

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:

A screen capture of the fourth section is displayed below in Figure C as shown in Google Chrome Version 23.0.1271.64 m:

Figure C

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 Five

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">
      <article>
        <div class="textbox">
          <p> Metal background is similar to...</p>
        </div>
      </article>
    </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:

Figure D

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".

Scripts

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:

  <!-- The JavaScript, starting with jQuery -->
  <script src='js/libs/jquery-1.6.1.min.js'></script>
  <script src="js/script.js"></script>
  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg");
  <![endif]-->

As you can see from the above script calls there is a fallback for IE 7 and earlier versions with the "dd_belatedpng.js ", which adds IE6 support for PNG images for the CSS background-image and HTML, according to its creator Drew Diller. In essence, it is a JavaScript library that sandwiches PNG image support into IE6 without much fuss. It is available as free software for use under the following MIT license, which means that it is not supported in any way and has no warranty or guarantee for use, but feel free to modify it to suit your own needs and requirements.

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.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
dledet1
dledet1

ckourounis – Were you ever able to resolve the issue with doing multiple sprites? I am trying to do the same thing and have not been successful. Only the top sprite shows up. Any suggestions?

ckourounis
ckourounis

hey I'm looking to add multiple sprites but whenever I duplicate and give each sprite their individual styles, only one should show. What am I missing here? Any help is greatly appreciated Chris

logo design Australia
logo design Australia

Great article for the parallax scrolling effects, I am sure that people love to try it for their web designing.

lehnerus2000
lehnerus2000

My Web Design instructor says that it's all the rage and everyone is demanding it for their sites. Thanks for these articles Ryan. :)

CBIL360WebDesign
CBIL360WebDesign

I like it. Going to implement such parallax scrolling effects.

dledet1
dledet1

@ckourounisWere you ever able to resolve the issue with doing multiple sprites? I am trying to do the same thing and have not been successful. Only the top sprite shows up. Any suggestions?

Editor's Picks