Using the Parallax Trend to Create Visual Interest and Surprise

Cool scroll effects are begging to pop up on more and more site designs.

The most popular and trendy of these effects is parallax scrolling. The technique – in which website screens or panels seem to flip with a quick scroll, or objects animate or move – can add an extra level of interest to a site and generate increased user interaction.

SEE ALSO: Infinite Scrolling: Is It Good or Bad for Your Website?

But you need a solid understanding of what it is and how to use parallax concepts before you jump on the trend. While it can be a great visual and user tool, parallax effects must be executed with precision.

A note about the examples in this article: While still images of these websites may look great, you must visit each site to get a clear understanding of how parallax scrolling techniques work on each individual website.

What is Parallax?

Guyvernes

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Unfold

Fishy

Parallax is a technique that happens when multiple layers of information are combined and move at different speeds to create movement, depth or a 3D-like effect.

Parallax scrolling gives the use control of this effect by activating it with the click (or more precisely, scroll) of a mouse. It can create an interesting user experience and different way to provide information.

Parallax scrolling can be vertical or horizontal. The trend is moving toward more horizontal effects, although vertical scrolling is most common. Parallax effects can be hard to master and often work best with great images, although it is not a requirement.

History Lesson

Although parallax concepts are fairly new to web design, the overall thinking behind it is relatively old. The term parallax comes from the Greek work parallaxis, meaning alteration. And that’s exactly what you get with parallax web design – an alteration of elements on the screen with a click or scroll of the mouse.

Parallax has been use to showcase a variety of viewpoints and perspective shifts for many years though. Think about two photos, for example, that show the same object from different vantage points.

The effect has also been used in a variety of less sophisticated ways online, too. Most commonly as a comparison for two images; before and after shots are a common use of parallax.

Video games are another example of media that have used parallax scrolling for years. Many of the most popular games of the early days of gaming – Super Mario Bros., Streets of Rage and Moon Patrol – were built using this concept that allows two-dimensional images to have 3D effects.

But as technology has changed the definition of parallax has grown. Now when you say “parallax,” most people immediately think of webpage scrolling effects. There are different ways to accomplish parallax scrolling methods in the design process – layers, sprite, repeated pattern manipulation or with raster images. And then it takes a little development magic using combinations of HTML5, jQuery, CSS3 and JavaScript to complete the project.

Why Use Parallax Scrolling?

Tokiolab

Titanic

Evanbond

There are some rather distinct advantages to using parallax scrolling techniques. The most common is that is “just looks cool.” And while that’s true, it is a good idea to have a few more reasons to support your case for using a parallax design scheme.

Create interaction: Draw users into the site with scrolling. As pages change (especially if it happens in a dramatic way), users will want to continue to interact with the site to see what happens next.

Tell a story: Sometimes the best way to tell your story is to tell an actual story. Do it visually with parallax. This works differently from a video, for example, because users can follow the action at their own pace, moving both forward and back.

Showcase a product: Sometimes one flat image is not enough to really show off what you are selling. Use parallax effects to show different products or multiple views of a single item.

Engage visitors: If users want to play with the site, they will hang around longer. Make the content and user interface interesting and engaging, so users will want to play with it. Three great ways to do this? Use parallax effects to build interest and encourage curiosity, have fun with a game or activity or surprise visitors with something in the scroll effect.

Call to action: Use parallax effects to tell site users what to do next – from clicking a button or link to making a purchase or entering their contact information.

Remember the backbone of parallax is the user experience. Make it interesting, unique and relevant to your audience. Keep the principles of great design in mind first and foremost and add this effect to the design outline after you have a built a solid concept from color to typography to content.

12 Great Examples of Parallax Design

There are a lot of sites using parallax design right now. Most have popped up in the last year or so, catching on with the trend. In addition to the examples above, here are 10 sites that are doing it exceptionally well.

SoleilNoir

SoleilNoir

Jan Ploch

Jan Ploch

MarioKart Wii

MarioKart Wii

Spring/Summer

Spring/Summer

Bagigia

Bagigia

Activate

Activate

Krystalrae

Krystalrae

Sullivan

Sullivan

Nike Air Jordan

Nike Air Jordan

Bake Agency

Bake Agency

SxSW Beer Camp

SxSW Beer Camp

Whiteboard

Whiteboard

Conclusion

Websites designed with parallax outlines can be fun and interesting. (We all love to play a little.)

But to do them in a way that is successful, try to keep other effects to a minimum. Adding motion to a cramped design outline can be disastrous. Stick to a more minimal design scheme and use parallax effects to add interest and create emphasis.

One more thing to keep in mind: Not everyone will “get” parallax scrolling right away. Sometimes it is best to give users a little nudge or instruction. You’ll see from many of the examples here that even the best designs often tell users how to interact with the content.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

11 Comments
  1. oussaki Apr 9, 12:45 pm

    Thank you very mush for this lesson !

    Reply
    0
  2. oussaki Apr 9, 12:48 pm

    Can you do a tutorial for us to how to do that Parallax design ?

    Reply
    +8
  3. Diego Sieg Apr 9, 3:52 pm

    Hi Carrie,

    Two new examples from Brazil:

    http://minhacidade.me/inicio/

    http://minhacidade.me/

    Cheers!

    Diego

    Reply
    +2
    • Carrie Cousins Apr 9, 10:15 pm

      Great sites, Diego.
      I especially like this one — http://minhacidade.me/inicio/

      Reply
      +2
    • Jt Hollister Apr 9, 11:59 pm

      I’d really like to see some intensive study and discussion of how this actually impacts the user experience and ROI.

      I have noticed a lot of popular sites start using Parallax, then stop fairly shortly after. It makes me wonder what the effects on results are.

      Does this really engage users? It seems like it would, but does it just confuse certain demographics and make them leave or trust it less? What kinds of situations does this actually work best for? I’ve seen a lot of successful Kickstarter campaigns, so it seems like it might be a good tool for that. Would it make a good portfolio though? E-commerce (maybe if you were just selling one item?)?

      I don’t know, I’m just really curious about these types of things. I’m hesitant to jump on the bandwagon when new things like this come out, I would like to see some real-world results.

      Great article and some really cool sites!

      Reply
      +1
  4. Eric Apr 10, 3:25 am

    Noticed one thing, most of them are not mobile friendly which makes me hesitate to utilize it in my next project. is their a solution on mobile?

    Reply
    +1
  5. Sean Apr 10, 6:38 am

    Oh my god. I find so many of these examples atrocious: A UI where the user can’t tell what is clickable and what isn’t. A UI where the controls are essentially disguised, below the fold, or ill-placed. A UI where the user’s eye is overwhelmed by content (or rather, NON-content.) A UI where little things are floating, peeking, changing, with no apparent rationale. There is a frightening echo of 1990s web UI here when everyone was enamored of multicolored, flashing text and random animations – except at least then one could pretty much assume that they were for “looks” only – now there’s a distinct possibility that you must chase a moving object and click it to make something (but what!?) happen. Also are these UIs accessible if you must use alternative input?

    Reply
    +1
  6. Sabina Idler Apr 10, 11:43 am

    Thanks for the great post, Carrie. I really like the parallax scrolling effect and wrote an article about it myself. It might be a nice resource for people interested in the effect: http://blog.usabilla.com/15-reasons-why-parallax-scrolling-in-web-design-is-awesome/

    Reply
    +1
  7. Vit Dec 2, 1:05 am

    Now it became really easy to build landing page with parallax. Adobe Edge Animation help to do this. I spend one day to build this page without coding: http://promo.concertwith.me/1reason_en/

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters