Parallax Effect using jQuery
We recently had the opportunity to put a cool visual technique to use: Parallax. According to Wikipedia, Parallax scrolling is a “pseudo-3D technique, [where] background images move by the ‘camera’ slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion” [Parallax Scrolling on Wikipedia].
To see the effect in action, check out 1000 Acts of Kindness.
jQuery and the plugin ScrollTo were both used, along with several transparent PNG layers. By making “close” layers scroll faster than “far away” ones, a 3D feel was introduced to the page.
How it Works
For each layer we have a <div class=”layer”> element that has the following CSS properties:
.layer {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
}
.layer div {
width: 10000px;
}
Each layer element has a <div> inside of it that has a transparent PNG background image, a forced height (the height of the image), and a really big width (as shown in the snippet above).
If we didn’t have the “overflow: hidden” on the containers, you would see scrollbars on the bottom of the page. Using this CSS property we hide the scrollbars, and later we will use the jQuery plugin ScrollTo to automatically scroll each layer.
For each layer I assign four distances, one for each “slide”. Closer layers have more difference between each distance, and far away layers only move a little. The following table shows the distances for each layer.
Layer
1st slide
2nd slide
3rd Slide
4th Slide
#clouds4
20
100
200
300
#clouds3
20
150
300
450
#clouds2
20
200
400
600
#clouds1
20
250
500
750
#fartrees
20
300
600
900
#neartrees
20
800
1600
2400
When the time comes (the user clicks on the “next slide” arrow), each layer is scrolled:
$("#clouds4").scrollTo(x, 500);
“x” is the distance determined by the table above, depending on what slide we are going to. The second parameter is how many milliseconds the animation will take.
Warning
Internet Explorer (even IE8!) renders transparent PNG’s differently than other browsers, and therefore the animation is a little choppy. To overcome this, I removed all overlapping layers in IE using conditional tags. That means that IE users won’t get the full effect, but the site is still usable, and there is still some parallax animation happening. For IE6 (yes, we still make sure our sites work in that dusty old thing) I replace the transparent PNG images with transparent GIFs.
For more information and a full tutorial on parallax scrolling, check out Anthony Comben’s post Create a Funky Parallax Background Effect Using jQuery on ThemeForest.
If you have any parallax scrolling projects, we’d love to check them out! Let us know in the comments.
Subscribe to: