portfolio: http://www.romancortes.com

After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture a background image.

With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop.

Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little and easy to understand I hope.
Even if this effect is mainly CSS1 and some bits of CSS2 - for the scrolling div, overflow: auto property, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, Safari 4 and Opera 10. Also, the code validates.