ǹŴ jQuery 3D Parallax Background Effect
Ҫ : 844  | ǹŴ : 181  | Ǵ : Image Effects

jQuery 3D Parallax Background Effect


Our page will consist of 6 sections: header, footer and 4 articles. On the right, we’ll place an unordered list that links between the articles and remains fixed on the page so it doesn’t move.

1 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
2 <script type="text/javascript" src="scripts/nbw-parallax.js"></script>
3 <script type="text/javascript" src="scripts/jquery.inview.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6     $('#nav').localScroll();
7 })
8 </script>

o start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. The scripts we’re using are:

jQuery 1.4.4
The script written by Ian Lunn (which we’ll cover shortly)
jQuery Inview (determines whether a particular article is in view)

Inside of our body tag, we have the containers that will make up each article.

1 <div id="intro">
2     <div class="story">
3         Article content here
4     </div> <!--.story-->
5 </div> <!--#intro-->


I won’t cover what all of the CSS does, just that which is relevant to the working of the effect. Let’s take a look at the CSS for the HTML container I just mentioned above:

1 #intro {
2     background:url(../images/night_sky_background.jpg) 50% 0 no-repeat fixed;
3     color: white;
4     height: 1000px;
5     margin: 0;
6     padding: 0;
7 }

The first article (#intro), will have one background image and a height of 1000px. The width isn’t defined so it will stretch to 100% of the window. Each background image used for the articles I have made 1920px wide so the majority of monitors will have a full image background. Anything over 1920px will see a white border.

1 .story {
2     margin: 0 auto;
3     min-width: 980px;
4     width: 100%;
5 }

Inside of the #intro container, we have .story which is present in every article container. This purely keeps each article centered in the browser and with a width of 980px, almost every monitor will see the website without the need for horizontal scroll bars.

Multiple Backgrounds (or where it gets fun!)

In the demo and downloadable files you’ll see that the articles have multiple backgrounds. Nikebetterworld achieved this using extra HTML in the article container which is exactly what I’ve done just like this:

01 <div id="intro">
02   <div class="story">
03     <div class="bg1"></div>
04     <div class="bg2"></div>
05     <div class="bg3"></div>
06     <div class="bg4"></div>
07     <div class="bg5"></div>
08     <div class="bg6"></div>
09     <div class="bg7"></div>
10     <div class="float-left" style="margin-left:45%; z-index: 400;">
11     <h2>Night Time Forest Scene</h2>
12     <p>This section has a background that moves slightly slower than the user scrolls. This is achieved by changing the top position of the background for every pixel the page is scrolled.</p>
13     </div>