Build a parallax scrolling website interface with jQuery and CSS
Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.
Parallax what?
Even if you’re not familiar with the term “parallax scrolling” you will certainly be familiar with the technique. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. When you observe the landscape from a moving car, objects closer to the car appear to pass you faster than scenery further away. Parallax scrolling uses the same principle to trick the viewer into thinking they are observing a 3d scene.
Demo and Download
My demo web page shows one approach to building a vertical parallax scrolling interface:
You can scroll in the usual fashion, use the navigation menu at the right-hand side of the page, or the next/prev buttons that appear underneath each article. As you scroll, the page’s four content layers are animated independently of one another to create an illusion of depth.
The scrolling looks smoothest in Safari (at least that’s the case on my PC), but my demo should work in any modern browser.
Disclaimer 1: Because this is just an experiment I’ve not spent any time optimising the demo to work on mobile devices. I wanted to keep the demo lean ‘n’ mean, and not clutter it by sniffing mobile browsers and forking my code. On a production site you’d want to ensure that the site degrades gracefully on mobile devices, where scroll events and fixed positioning might work in unexpected ways.
Disclaimer 2: The navigation menu in my demo is inspired by the menu on the Nike Better World website. If you plan on implementing a similar menu on a production site, please be aware of its origin.
How it works
The articles and background layers are given a fixed positioned with CSS, and assigned a z-index so that the foreground layers appear above the background layers. The four layers are: small clouds, large clouds, balloon/landscape images, articles.
/* foreground (ballons/landscape) */ #parallax-bg3 { z-index: 3; position: fixed; left: 50%; /* align left edge with center of viewport */ top: 0; width: 940px; margin-left: -470px; /* move left by half element's width */ }
Within each layer individual content elements are absolutely positioned. This was the most fiddly part of the process, since the elements need to positioned in such a way that they align in a pleasing manner when the user scrolls to any of the four articles. In this case it was really just a process of trial and error.
#bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } /* etc... */
A few lines of jQuery control the parallax effect, triggered by a scroll event. I was surprised how easy this was to achieve, it is literally just a handful of lines of code.
$(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); }
As you can see the CSS top property is used to move each layer as the user scrolls. The foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth. The lower a layer sits in the stack, the less distance it is moved.
The rest of the jQuery is concerned with controlling the navigation menus. When the user clicks a navigation button the page scrolls to the top of the associated article. In the event that the user has JavaScript disabled, regular HTML anchor links still allow the page to be navigated, but without any fancy pants animations.
Next steps
I’m sure there are plenty of other approaches to parallax scrolling, and hopefully my experiment provides a starting point for your own explorations of the technique.
Update
I have updated the demo so that each parallax layer is given a fixed, rather than absolute, position. This approach gives a smoother scrolling effect.
Tweet
I wonder if there is not that same file to download, I had such a section I got it vertically and could navigate this section HORIZONTALLY.
Sample:
Section portfolio, I get it vertically and within that section I sail HORIZONTALLY.
I appreciate the guidance.
Nice clean tutorial. Thanks for keeping it simple and explaining it well!
great example, thanks!
so clean and simple…
can you help me out on something please?
what should I do if I need a certain object to stop at, say, “top:0″?
thank you!
Hi Jonathan,
Thanks for this great tutorial.
Used it to do a little parallax demo
http://youssef.groupewib.com/BM/BK/
Keep up the good work !
Nice!!! This is exactly what I was looking for, clear, simply and efficiently, thank you so much!
Hi Jonathan,
Thanks for putting together such a simple, easy to understand tutorial. I used your method for my portfolio at http://www.oregamimedia.com and included a link back to this tutorial.
Would love your feedback. Thanks!
Hello,
Your script and example are great!! Used it to build out a portfolio site. But there seems to be an issue with MSIE — are you aware of a compatibility issue? It seems that the top layer (#parallax-fore) is not being drawn.. does this have something to do with the z-index setting? Are there other constraints with MSIE? The site works well in other browsers.. Would appreciate your input:
http://www.cloudsao.com/parallax/proj_004_forest-mind/index_fm.html
Thanks in advance!
@clouds – Worked for me in IE9 and IE8 under Win7. I didn’t test IE7. I noticed it took a few seconds for some graphics to load, so it’s possible IE is waiting for another asset (JS or something) to load before it finishes loading the images. Or it may have just been network congestion. Looks good, BTW! Nice to see a sideways scrolling implementation.
I worked to implement a little of your parallax in a WordPress site.
Unfortunately it doesn’t seem to get the code:
$(window).bind(‘scroll’,function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$(‘#parallax-bg1′).css(‘top’,(0-(scrolled*.80))+’px’);
$(‘#parallax-bg2′).css(‘top’,(0-(scrolled*.90))+’px’);
$(‘#parallax-bg3′).css(‘top’,(0-(scrolled*.50))+’px’);
$(‘#parallax-bg4′).css(‘top’,(0-(scrolled*.20))+’px’);
}
Is it possible that i need to change the “.css” in this script to link to the right css?
Could you help me with this one.
Great tutorial. Love the clouds, where did you find them?
Thanks,
James
Have it online but not working.
Anyone suggestions..
@Mark If you look at your javascript console you’ll see the error “Property ‘$’ of object [object Window] is not a function” in line 4 of your parallax.js. This means you’re trying to reference jQuery’s $ method before jQuery has been loaded.
This is happening because you’re executing parallax.js as soon as it is loaded, rather than waiting until the DOM has loaded.
Instead, you should wrap the contents of parallax.js in a jQuery (document).ready() handler. For a WordPress site, this can be done like so:
jQuery(document).ready(function($) {
// your code goes here…
});
You can read more about using jQuery’s $ shortcut in WordPress in the WP codex.
@James The clouds are a stock vector element. I can’t remember where I purchased them: possibly 123RF or ShutterStock.
Cool tutorial!
thanks for al the support.
have it working now on http://www.woodcut.nl
Hi Jonathan…. HUGE PROPS!
After hacking around for hours yesterday with different examples of parallax, I was delighted to find your clean, clear, and nice-to-work-with example. Alot of developers are achieving this with dynamically moving image backgrounds… but moving the ‘s themselves is much more flexible.
Thanks!
Regards.
S.
hey thanx 4 d gr8 tutorial jonathan…
and @youssef ur bubble kingdom was amazing,
could u pls explain it in details as to how you did it as i’m new to this jquery and css world.
i would especially want 2 know more on how ur able 2 expand the bubbles when d cursor hovers over it and how everytime you refresh it comes up with a new layout.
would b grateful 4 ur rply.
Hello,
how to adapt this to the mobile?
Thanks.
Hello Jonathan, congratulations for the hard work and dedication.
The sample “demo” that you released, you can download and use it in personal projects, such as portfolio?
Great Tutorial, really awesome! It works fine and isn’t to difficult to understand it!
Jonathan,
I love the visual style you’ve chosen to represent this.
A question(s). So the content is in articles and placed into position while each DIV has a clouds as images in it which is offset to give the effect. Now because each image is a background to a SPAN what problem would you possibly foresee in each SPAN have content in it? ie: each cloud could be a quote or small article.
@Mr. John – Sure, use it as you please. If you trawl back through the comments you’ll see that quite a few people have used my demo as a starting point for creating their portfolio sites and personal projects.
Bear in mind that if you want to use any of the images from my demo, you’ll need to ensure you own the proper licenses (I bought a license for the cloud image, and the others I believe are in the public domain.) I assume you plan to use unique imagery, however.
@MIchael Yes, you could replace the cloud imgs with spans, or divs or whatever.
This is not awesome, This is awesomest…! I LIKE IT VERY MUCH.
Thank you for the great detailed tutorial and demo. I will be using this for a special April 1st site that is launching soon.
Cheers!
Many thanks Jonathan.
Again, congratulations for the work and the Initiative is of our making available excellent demo.
hugs
Any way to get this working on iOS? Bypassing the regular iOS refresh limitations so the background keeps scrolling while one swipes?
Wow this is a neat tutorial!!
Someone knows how to adapt this to a wordpress theme???
@Mark, you said you did…could you share please???
Well, This is really awesome plugin. Thanks for sharing such a great plugin.
Hi,
Excellent work. One question though,
How to I put a relative footer at the bottom of the example?
Cheers!
Sebastian
Thank you very much. Your demo is so clean and elegant, it is simple to follow.
nice and simple work. but is there a way to stopp some divs at a certain position?
regards
pascal
Hi,
Nice work. Clean codes and helpful comments inside the code.
How can I make every article to be like 1 slide which has a wide fixed background so that the effect is like on this link http://www.ok-studios.de/home/ or http://www.sullivannyc.com/
Thanks in advance.
Whiz
hi,
i wanna know is it possible to do a tutorial on horizontal parallax scrolling website??
i’m a noob and i couldn’t find any good tutorials on it