From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
The use of the parallax effect or parallax scrolling effect in websites can add a nice three dimensional depth illusion to the design and make the visit very interesting to a user. We have collected some creative examples of the parallax effect in web design. Enjoy!
Rastapé
Besides creating a lot of depth with the design itself which shows a bar or venue, the parallax effect gives it the ultimate kick when moving the mouse!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Old Pulteney Row to the Pole
Here we have a great example of the parallax scrolling effect, where the background moves “slower” then the content when the page is scrolled down. This instantly makes the background appear more distant, adding some beautiful perspective to the website.
Billy’s Downtown Diner
Billy’s Downtown Diner’s website has a header part that moves when hovering with the mouse. The parallax effect is achieved by moving the layers that are closer to the viewer slower than the ones that are more distant. Giving the whole movement a little “shakiness” makes the effect even more interesting.
Webdesign Karlsruhe
Careful, this one moves a lot with the mouse 🙂 It shows portfolio items stuck to a layered memo or photo holder creating the parallax effect when moving the mouse over the page.
EMM and ENN
Here we have less of the classical parallax effect but more a movement of different layers in different directions which, besides the header background, also creates a nice depth to the design.
Xhtml Slicing
On XHTMSlicing.com the parallax effect is achieved by moving the mouse over the header part. The layers with the website images also have a different degree of blurriness to them, which enhances the effect and makes the most blurry items appear more distant.
Head2Heart
On this incredibly beautiful website Head2Heart clicking on the arrows of the path (or of the bottom navigation) will guide you through the way of explaining the wonderful message, creating the parallax effect with the movement of the clouds that surround the path.
Originální, rucne vyrábené diáre 2011
This website has many different layers of backgrounds, all moving along with the website content when moving the mouse. Very strong parallax effect effect.
The Beatles Rock Band
The Beatles Rock Band website has a header with the classical effect on mousemove.
Juvelér Langaard
On Juvelér Langaard’s website you will notice the effect when using the content slider: the background will move less than the content.
Dezignus
On Dezignus you can experience a nice parallax effect when moving over the header. Subtle and beautiful.
Farmhouse Fare
On Farmhouse Fare, the effect is also very subtle and it enhances the beautifully crafted illustrations and images. Clicking on any menu item will lead you to another section and you will notice a slight difference of movement of the elements. Click on “Contact us” to see a stronger effect.
Nike Better World
Here we have a great example of the parallax scrolling effect. Just scroll down and see how the layers move with a different pace, creating a great amount of depth.
FillStudio
FillStudio has a slider that will move the items differently creating the effect.
b’Twin
Take a ride on this website! Moving the mouse will animate the different layers and you will also notice the elements that move by themselves, creating a 3D experience.
And that’s all! I hope you enjoyed this little collection!
My website uses a parallax effect. Check it out at:
http://www.b5designs.com
Thanks!
Awesome collection
Hi Mary Lou,
nice collection, but the last 1 is most definitely a Flash-website – donno if that’s also defined as parallax-effect?
Thanks for sharing, Cheers & Ciao ..
My website use the jquery parallax take a look 🙂 http://www.dhype.com
awesome collection.. thanks for sharing.
I had been searching for such sites since a long time. Thanks a lot.
Do check out my website. I have used parallax effect too.
http://www.ortapinc.com
Cheers !
Great post! Way to go Mary Lou!
Mine too, some heavy parallaxing 🙂
http://www.headlinecreative.com/
Parallax is a nice effect if applied in the right way, but it seems a lot of sites have just for sake of having a parallax effect. In sites like The beatles Rockband, Billy’s Downtown Diner and Dezignus it’s just distracting and doesn’t do anything to help the design.
Thanks for sharing these. Some are quite nice. I like the variety here.
Some are well done but the rest of the site hurts the effect due to other ugly site features (popups, layout issues, poorly placed ads).
A couple of them fall into the realm of “just because we can’t doesn’t mean we should”.
Overall, most of them look good.
I agree with Jorgen.
Some instances of parallax is nice and compliments/works with the design.
A lot of these examples are just distracting.
Every link that’s been posted in the comments, for instance, are terrible implementations if not just ugly as sin.
Design to communicate something. Don’t design just because you heard it was cool.
Check out http://www.mushgame.com too.
Overall nice collection 🙂
Also http://tntrailsandbyways.com/
BTW good collection! Thank you.
We used parralax for this site, to support the mood of the music (nordic-futurista-melancholy).
http://www.nicosialonghi.com/
Pretty wonderful examples here and I’ve really got to use this effect now!
Wow great collection. I love the Billy Downtown Diner, very clever.
DIEGO, YOUR SITE SUCKS
Its great to see our website in this list, many thanks 🙂
http://www.emmandenn.com
great use of jparallax + smooth div scroll http://www.gableboulga.com
I think I’ve found my inspiration blog. Parallax is very cool stuff! Thanks for sharing.
Wow ! 🙂 Very nice collection ! 🙂
Does anyone know of a good jquery parallax tutorial???
I just love looking at Rastapé. A great collection all in all.
It was good to see Billy’s Downtown Diner make the list–I love eating there and pondering future web design projects over an awesome omelette.
I’m using the same effect on my website too http://rvflores.com/
Mine’s not as complex as the other mentioned here, but it still uses a minimal dose of Parallax 🙂
http://snoop.ro
Here’s one I was involved in. Uses a lot of parallax! 🙂
http://www.ragam.org.in/2011
For “Diego Chávez” website it is just a plagiarism of a famous french web agency http://www.colorz.fr/ ….
Some awesome examples on display here.
Checkout http://www.thedriftbar.co.uk from Propeller also.
But in my site too http://www.almaz.lact.ru/ too much Parallax))
Nice collection!!
Someone knows a good tuts for this effect?
THIS ONE LOOKS NICE TOO http://iamthej.com
I have to agree with those who find the use of parallax distracting when not used to good purpose. Of the first four, only Kahrlsrule used it to create the sense of a “desktop bigger than the monitor,” as a navigation tool. And even there it had edge-effect bugs that made it seem a less than professional effort. I was unimpressed.
Wow,
good collection, great inspiration.
Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK
You are simply unbelievable!!!
nice,
Happy new parallaxe year : http://bit.ly/AaIDit