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

Posted in Inspiration, Web Interfaces • Posted on 16 Comments

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.

34 Written ArticlesWebsiteGoogle+

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

16 Comments Best Comments First
  • Dainis Graveris

    Wednesday, December 7th, 2011 04:40

    4

    looks awesome, thanks!

    +2
  • Chris

    Thursday, December 8th, 2011 17:32

    9

    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!

    +2
  • Derek

    Wednesday, December 7th, 2011 16:05

    6

    Anyone knows how they did the website “The Art of FLIGHT”?

    +1
  • Marlon

    Wednesday, December 7th, 2011 04:23

    3

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

    0
    • Jamal

      Wednesday, December 7th, 2011 05:31

      1

      Hi, if you continue reading after that sentence I think it clears things up for you :). Thanks for reading!

      0
  • Sunil Sharma

    Wednesday, December 7th, 2011 19:26

    7

    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

    0
  • Jussi Sivonen

    Wednesday, December 7th, 2011 09:21

    2

    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!

    0
    • Jamal

      Wednesday, December 7th, 2011 15:26

      5

      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 :)

      0
      • Marilee

        Tuesday, December 13th, 2011 04:51

        13

        This is both steret smart and intelligent.

        0
  • Morgan

    Thursday, December 8th, 2011 06:59

    8

    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.

    0
    • Jamal

      Friday, December 9th, 2011 06:07

      10

      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.

      0
  • Mary

    Wednesday, December 28th, 2011 16:21

    15

    “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

    0
  • Geoff Kwok

    Friday, February 3rd, 2012 10:02

    16

    Some people really know what to put on a website hey!

    0
  • Kuzmin

    Tuesday, December 13th, 2011 11:03

    14

    but really great collection. I adore 5, 9, 11, 13, 14

    0
  • Joshua

    Friday, December 9th, 2011 05:35

    11

    A few of the sites on here are pretty great, worth a look.

    0
  • Sam

    Sunday, December 11th, 2011 09:39

    12

    Great collection. Thanks for sharing. I like the smokey bones the most.

    0
  • Geoff Kwok

    Friday, February 3rd, 2012 10:02

    16

    Some people really know what to put on a website hey!

    0
  • Mary

    Wednesday, December 28th, 2011 16:21

    15

    “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

    0
  • Kuzmin

    Tuesday, December 13th, 2011 11:03

    14

    but really great collection. I adore 5, 9, 11, 13, 14

    0
  • Sam

    Sunday, December 11th, 2011 09:39

    12

    Great collection. Thanks for sharing. I like the smokey bones the most.

    0
  • Joshua

    Friday, December 9th, 2011 05:35

    11

    A few of the sites on here are pretty great, worth a look.

    0
  • Chris

    Thursday, December 8th, 2011 17:32

    9

    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!

    +2
  • Morgan

    Thursday, December 8th, 2011 06:59

    8

    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.

    0
    • Jamal

      Friday, December 9th, 2011 06:07

      10

      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.

      0
  • Sunil Sharma

    Wednesday, December 7th, 2011 19:26

    7

    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

    0
  • Derek

    Wednesday, December 7th, 2011 16:05

    6

    Anyone knows how they did the website “The Art of FLIGHT”?

    +1
  • Dainis Graveris

    Wednesday, December 7th, 2011 04:40

    4

    looks awesome, thanks!

    +2
  • Marlon

    Wednesday, December 7th, 2011 04:23

    3

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

    0
    • Jamal

      Wednesday, December 7th, 2011 05:31

      1

      Hi, if you continue reading after that sentence I think it clears things up for you :). Thanks for reading!

      0
  • Jussi Sivonen

    Wednesday, December 7th, 2011 09:21

    2

    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!

    0
    • Jamal

      Wednesday, December 7th, 2011 15:26

      5

      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 :)

      0
      • Marilee

        Tuesday, December 13th, 2011 04:51

        13

        This is both steret smart and intelligent.

        0

Comments are closed.

23.20.77.156 - unknown - unknown - US