Hacker News new | past | comments | ask | show | jobs | submit login

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/




>> 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.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: