Hacker News Reader

I remember being impressed by Dragon Lab's Dragonfish Login Form Demo[1] when it first came out. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript.

I wanted to see how close I could get using CSS3 without any images.

I recommend using a Webkit browser [you can also see an alternate implementation using Firefox 4]

[1]http://labs.dragoninteractive.com/panel/demo/

View on HN

>> They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript.

Scrolling the background image position with javascript can be really slow on even recent browsers, pushing the CPU when software rendering. Mobile Safari also shows image "seams" between mask images when zoomed out.

Maybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.

Reply on news.ycombinator.com