20 Mind-Boggling Parallax Website Design And How To Make One

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.

2. Nike Better World

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.

3. Dezignus

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.

5. Cultural Solutions UK

Great use of adding motion in the header, and using a simple background to make such a cool effect.

6. The Beatles Rockband

Just keep your focus on the clouds.

7. Smart USA

As you scroll, the car zooms in closer to you.

8. Emm and Enn

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.

9. Convax Solutions

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.

11. Heart 2 Heart

Just follow the arrows.

12. Manufacture d’essai

The eyes, and feet, of these models follow you everywhere.

13. Cantilever Fish & Chips

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.

15. Billy’s Downtown Diner

A very nice and playful use to make the header more fun.

16. Phase 2 Design Studio

Who would’ve guessed that the journey of a rain drop through a plumbing system could be so much fun?

17. Tennessee Trails and Byways

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?

19. Campaign Monitor is Hiring

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.

This effect is quite easy to do yourself, actually you’ve unknowingly been learning how to do this effect for quite some time. Using such tools as JavaScript, MooTools, CSS, and jQuery, there isn’t that much new material to learn. Below you can find a nice collection of tutorials and resources to help guide you along the way.

Jamal

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Mary says

    “Parallax design” i’ve never heard of it before. LOL The samples look great! Thanks for sharing. Its good to stop and appreciate this things once in a while. :D

  2. Chris says

    WOW! Several of these examples are just stunning, and great to interact with! I am most impressed how the designs stay cohesive even though overlapped images are cropping and moving separately within the page. Great resource for inspiration – thank you!

  3. Morgan says

    I guess there’re 2 schools of thought here. I fall into the one that thinks of it as an obstruction. I find it pretty annoying to have this constant element ‘following’ me around, permanently stuck in one location. Almost feels like walking into a store and having a security watching your every step.

    • says

      Hi Morgan,

      I take it like any other design style, you never want to put too much extra emphasis on it to the point that it puts your users at a less than ideal viewing situation. As long as when we use this style we consider the age group and audience when we design it should be okay. Just goes back to the designer/developer being considerate of the end user, and not just want to overuse whatever hot new technology trends are out now.

  4. Sunil Sharma says

    Thanks Jamal for this awesome post and useful examples of beautiful web designs. It made me remembering of thebestdesigns.com which is my favorite website and I use to look prior to design new brochures.

    Sunil

  5. Marlon says

    “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. ”

    Right, that’s cleared that up then.

  6. Jussi Sivonen says

    To me this is obtrusive to browsing/reading experience. Feels like flash-reborn, which isn’t really good even it is supporting wider range of devices. Am I the only one with this sentiment? I know that majority of the examples are showcase/marketing type sites, but still..

    IMHO html5 should be used to design sites with better usability, user experience and cross-platform compability. If the site looks like Turrican 3 (or insert any platform-jumping game) from Amiga, it isn’t quite that :P

    Yeah I know, I got a boring taste!

    • says

      Hi Jussi,

      I understand where your coming from. I am a strong preacher in considering the overall user experience, before implementing the coolest new thing on your web project. However we still do need to push the level of technology in our industry, its just how our industry’s culture is. That is an important aspect, and should never leave. Thanks for taking the time to read my article and comment :)