Parallax

I really love websites that use parallax.  Parallax, for those who have seen it but probably don’t know what it’s called, is a visualization where the background appears to move slower than the foreground.

Here’s a *great* example:

(Scroll down)

http://www.nh-hotels.com/winter-holidays/

The snow on the pages appears to move at a different speed than the navigation bar.  It’s not actually the case, as everything is moving at the same speed, but it appears that way based on depth.

I love parallax because it draws me in.  Many websites move, but since I can control the movements, the experience is different.  Flash effects were mainly about the foreground.  They were meant to be the focal point of the site, but parallax based websites are meant to enliven the background.

One-pagers are incredibly popular, and for good reason, and parallax is the perfect component for giving a better user experience to one-pager websites.

Here are a few more really fantastic examples:

–The Bagigia website (http://www.bagigia.com/) uses parallax on the mainpage as a kind of unveiling.  The curtain rises to reveal the product.  The effect here is really special.

–The website for Canilever Fish & Chips (http://www.cantilever-chippy.co.uk/) uses the background to set the tone for each of their different sections.  The restaurant really succeeds in making a visually appealing site without being overly reliant on pictures of each individual dish they serve.  Note especially the contact  page has a map in the background as well as the foreground.  I didn’t notice it right away.  Instead the feeling here is to subtly add depth.

Finally, last and best:

http://www.jessandruss.us

Jessica Hische is an absolute hero!  If you’ve read my blog before you probably know that I really love her.  This site is absolutely fantastic.

It’s the best wedding invitation I’ve ever seen!  Enjoy!

 

Which parallax websites do you like best?  Post them in the comments!

 

Advertisements

One thought on “Parallax

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s