Yesterday I was looking up this interesting CSS 2 property called background-attachment.
Its no big bang. It can have a couple of values scroll and fixed. Scroll will scroll the background image with the page and is the default for all elements that have a background image specified, Fixed will make the background image stay in the same position even when the page is scrolled.But with a few tricks combined with the background-position property, this can be leveraged to give neat little animation effects when the page is scrolled.

I notched up a small demo with a couple of paintbrush illustrations and tried to give the effect of filling a glass with water. Those interested may fill it with Beer or whatever they like. 😉

View Demo.

It’s no rocket science I know and with the advent of CSS 3, JavaScript libraries like MooTools and jQuery that can do better animations with a single line of code, one would ask why bother? Sure. This was just an experiment. But check out how creative Román Cortés got with this concept using a 2D displacement map of <p> elements for each pixel of the scrolling image in this demo here.