Chapter 3. Parallax Scrolling

Our next web trend, parallax scrolling, is not really a new concept; it is simply the visual effect where objects that are closer to you appear to move faster when you are moving than objects that are farther. It can be more simply put as the effect you see as you look out your car window and watch the closer objects zip by more quickly than objects off in the distance. In our case, or at least this chapter, we'll replace the car with a rocket blasting off through the clouds and into a sky full of stars as the earth falls beneath us. Does this sound far-fetched for the scope of a single chapter? Not at all! We're going to do it with some clever (if I do say so myself) JavaScript and helpful scalable vector graphics.

The parallax 3D effect in animation was created in the early days of movies to produce more realistic background scenes in the cartoons produced for the early movie theaters. It has also been used widely in video game development, especially in side-scrolling video shooters.

This project is so far the most exciting and challenging in this book for me to create. I wanted it to be as cool and as lightweight as possible while giving you a good framework for continuing the project in you own direction or modifying its functions to suit your own purpose. I hope the code explanation is clear; if you have trouble at any point, take a look at the completed code, available in this book's code bundle or on the GitHub project page at https://github.com/benlagrone/webtrendsSideScroller. Feel free to contact me with questions or fork the code, and show me ways to improve it. It would be an amazing bonus if I, the author, could learn something from you, the reader, through this book!

Without any more unnecessary history, let's get into the code.

Starting off

I would like to use some of our previous work in order to shave some pages off the chapter and to build on top of what we already know. This will use the principles of responsive design you learned, but we will update some DIV elements as I take you through the chapter. We will make a simple page layout, and there will be no need for any floating or responsive layout elements. To make it much simpler, we want it to look very modern, so we'll use the flat UI colors and basic layout we used in the previous chapter.

The HTML markup

The work will, however, ramp up pretty early, so we need to pick up speed from very early on in the chapter. The initial layout should have a <main> block as the direct child of the body element, containing five sections as shown here:

<head></head>
<body>
<main>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</main>
</body>

Since we have our work from the previous chapter, we have some color in our CSS ready to apply to our SECTION and DIV elements. Remember: we want to use the monochrome blue color scheme that we created in the Flat UI color section of the previous chapter.

Next, add some id attributes to the HTML5 SECTION elements. The SECTION elements should have these id attributes, in this order from the top: space, stratosphere, sky, objects, and terra. This should give you a hint as of what we are going to build: something spacey.

Let's forge ahead with building up our layout. Inside the space section, add two DIV elements and give them unique id attributes; anything will work. I will use p0 and p1. In the stratosphere section, add five DIV elements, following from the id attributes and beginning with p2. Next, in the sky DIV element, add seven DIV elements, following the same numbering pattern for its id attributes. In the object section, don't add any child DIV elements, and in the terra section, add a single DIV element with the id attribute ground, and then give it two child DIV elements. All these child DIV elements will serve as section dividers to hold the different frames you will scroll through in your parallax scroller. Take a look at the resulting code:

<main>
    <section id="space">
        <div id="p0">
        </div>
        <div id="p1">
        </div>
    </section>
    <section id="stratosphere">
        <div id="p2"></div>
        <div id="p3"></div>
        <div id="p4"></div>
        <div id="p5"></div>
        <div id="p6"></div>
    </section>
    <section id="sky">	
        <div id="p7"></div>
        <div id="p8"></div>
        <div id="p9"></div>
        <div id="p10"></div>
        <div id="p11"></div>
        <div id="p12"></div>
        <div id="p13"></div>
    </section>
        <section id="objects"></section>
        <section id="terra">
        <div id="ground">
        <div></div>
        <div></div>
    </div>
    </section>
</main>

Table of Contents for Web Design Blueprints

Chapter 3. Parallax Scrolling

Starting off

The HTML markup

Table of Contents for
Web Design Blueprints