Question

I just saw this sweet Header Animation (http://anchorage-theme.pixelunion.net/) and was wondering how to implement an effect like this on a site. I am quite fluent in html and css and have dabbled with javascript, but never really got in at the deep end. Maybe this is the place to start.

But how would I go about this header?

Answer 1

That’s not an animation, that’s a technique called Parallax Scrolling.

The idea is to mimic the “Parallax” optical illusion used in 3D tvs to add the effect of depth to the page while it scrolls (i.e. “background” elements move slower than “foreground” elements).

It uses the scroll position of the page to dynamically set position, opacity, rotation, or other attributes of various elements to achieve this effect.

Here’s a simple tutorial on it: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/