script.aculo.us reflection
April 27th, 2006
Thomas Fuchs at script.aculo.us created a script.aculo.us image reflection demo. It’s similar to the reflection.js script which uses canvas (and the revised example which does some browser detection and uses DirectX Image effects for Internet Exploder.
Rather than using canvas, script.aculo.us reflector creates a few billion div elements (check document in DOM inspector) and uses a CSS-sprite like method to create a div for each row of the image (I used this for the IE reflection). Each div element has a slightly different opacity value which gives the reflection effect.
At the moment, it works in Internet Explorer 6, Firefox and Safari Nightlies but its still in development so support for Opera and Safari may be added later. In contrast, reflection.js+IE already supports Internet Explorer 5.5+, Firefox 1.5+, Opera 9 and Safari.
I’m unsure whether it’s faster to use one canvas with a few image transformations or n divs with varying opacities and margins where n is the height of the image divided by 3.
For example with a 800×600 image, script.aculo.us’ reflection will create 200 divs with the same background image but differing opacities and margins to show a different row of the image.
See "Cross Browser Image Reflection" for information on how image reflections can be performed using DirectX image transformations.
| About Ken | |
 | My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004. I have experience communicating mobile technology and presenting new mobile products both online and offline, including at various trade shows and events. You can check out my profile or drop me an e-mail. |
- Javascript , Reflection , Web 2.0
- Comments(2)
That fuck stole your idea.
Bakula his arse.
It seems like with the script.aculo.us reflection, if cache is disabled, the browser will make a few hundred requests to the server.