3 ms·

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 im

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/ http://labs.dragoninteractive.com/panel/demo/

edandersen 16y ago
>> 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.
- mauriciob 16y ago
  Maybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.