Feature
Post

Category
Design Focus


Friday Focus 04/29/11: The Parallax Effect

This week on Friday Focus we feature what is probably the most famous non-Flash animated effect employed in websites today.

Designs of the Week

Moovents

Love the running theme of the rainbow spirographs not only in the heading but in the icons. Interestingly the parallax effect disappears in inner pages, probably to avoid tiring the visitors out, although I personally don’t mind.

Vivacitas

I really have no complaints about this one-page site, just the use of Cufon instead of straight-up web fonts.

Tobias Bæck

Love the bright colors and and slanting shapes, and the animation that appears when hovering on links—which is usually tacky but in this case it works.

Esteban Muñoz

Note that in this design, the parallax happens in the footer, as you move your mouse in that zone, and not as you scroll from one section to another.

Nike Better World

One of the best implementations of parallax out there. There are cues for which section of the page you’re in, uncovered layer by layer, and each heading is linked to the next via dotted lines.

Dean Muller

Here’s another parallax that doesn’t happen on scroll and those connecting lines.

I do surf better

Another popular technique: slideshows within slideshows. Here I think some of the background circles are a little too big.

Hobo Lobo of Hamelin

Not fond of how there are both horizonal and vertical scrollbars, but the animations and illustrations are quite impressive, especially the ones that activate when they’re in focus.

Web is Beautiful

The parallax isn’t even the most fascinating feature of this design. The circular motif is certainly another hit trend and this site runs away with that idea.

Social Media Weekly

CSSCSS Stress Testing and Performance Profiling
” I realized fairly quickly that CSS was to blame. Disabling JavaScript had no effect, but disabling all CSS instantly fixed performance.”

CSSSetting CSS3 Border-Radius with Slash Syntax
“Because the standard way of declaring the border-radius values (discussed above) has become so widespread, you may not be aware of an alternative syntax for this property.”

HTMLThe HTML5 Switch
“Really though, you don’t have to rebuild everything, not use everything in HTML5 for it to be worthwhile switching your doctype now.”


  1. By Ryan Leaper posted on May 5, 2011 at 1:17 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The parallax effect is a personal favourite of mine and an effect that can really engage the viewers attention and add real depth to a site and best of all it doesn’t rely on flash. The first time I came across this effect was the Nike better world site which I still think is probably the best example of the parallax effect on a site. I also like how the Esteban site have used it to create a layered effect similar to that of a theatre stage. I think this is an effect we’ll continue to see more of in the future.

  2. Trackback