There hasn’t been a design style that has captured the web’s creative community like that of parallax website design in ages, which, in non industry terms, is about a few months. You might be wondering what parallax website design is, I don’t believe I have ever heard of this. Well actually you have heard it, and seen its use for some time now. Before going into showcasing some really well designed websites utilizing parallax design, let’s take some time to examine and explain what it is.
By definition, parallax means the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites. This technique is not new however, this technique has been around for quite some time in the web design community before its recent rise to a trending style. The use of this technique to create the illusion of depth can also be traced back to older forms of media, like old school video games for instance. Below you’ll find some nicely designed websites that masterfully utilize this hot new trend.
1. Living Word
As you scroll down the homepage, the header stays in its position but the background changes in the direction you are scrolling in. The images and text within the page also add to the experience, making this a really cool effect.
An oldie, but still quite a goodie. This website was one of the early adopters that caught wind of how cool parallax web design is.
Keep your focus on the background behind the logo.
4. Sullivan NYC
Get ready to engage? Well considering their great use of parallax design, that seems like quite the understatement.
Great use of adding motion in the header, and using a simple background to make such a cool effect.
Just keep your focus on the clouds.
7. Smart USA
As you scroll, the car zooms in closer to you.
See even the kid in the picture is excited about parallax web design. It is cleverly incorporated into this frame to make for a nice playful experience.
Look how they bring their sketches to life with parallax design.
10. XHTML Slicing
This designer obviously likes to hang with parallax design. The hanger effect is an interesting twist to the normal use of this trend.
Just follow the arrows.
The eyes, and feet, of these models follow you everywhere.
Keeping it nice a simple with a layered background.
14. Art of Flight
This is one of the best examples of parallax design on the net! There’s so much depth and various angles of the site as you scroll. You have to see it for yourself to believe it.
A very nice and playful use to make the header more fun.
Who would’ve guessed that the journey of a rain drop through a plumbing system could be so much fun?
Just follow the trail of signs throughout the city. You’ll enjoy the ride.
18. Jan Ploch
The more you drink, the more knowledge you gain. Can you make it all the way to the end?
Another good example of what fun can be had with multiple image layers.
20. Smokey Bones
On this site you can make a burger, have a drink of beer, and after all that play some pool in the footer. What more could you need?
Learning How to Do It
After learning what parallax website design is, and seeing some really well designed sites utilizing this hot style, you’re probably wondering how you can use this style in your next design. Well fortunately for you, implementing this style is not that difficult. There are actually four easy to understand methods that can be used to create a parallax website design.
The Layered Method
The use of multiple backgrounds that can move independently horizontally or vertically, depending on your preference, and can be composited on one another.
The Sprite Method
Simply put, using one big image comprised of multiple images that displays only parts of that said image when at different positions. A commonly used effect in navigation menus.
The Repeating Pattern Method
Scrolling displays built up of individual tiles can be made to float over a repeating background layer
The Raster Method
Lines of pixels in an image are typically composited and refreshed in top-to-bottom order with a slight delay between drawing one line and drawing the next line.
- Auto Moving Parallax Background Using jQuery
- Recreate Nike World Parallax
- jQuery and CSS Single Page Portfolio Vertical Parallax Experiment
- Create a Parallax Website Header
- The Parallax effects with jQuery
- Background Animations Using MooTools