Reflections of objects usually give the interface a crisp and clear look and feel. It’s no magic to generate such effects in Flash or WPF/e as they’ve got dedicated graphic components. In the Ajax/DHtml world, creating graphics suffers from problems such as lack of tools, platform incompatibilities and bad performances.

Some of the standards available for use are canvas, svg, and vml. But none of the three is supported by all major browsers.

This morning, from Ajaxian.com, I saw link to a post in which the author mentioned his reflection generating script. It’s implemented based on canvas, which isn’t supported by IE at all but sufficiently covers Firefox and Safari. Here is the link to the demo page.

Then I’ve got some idea regarding implementing the cool effect with pure Javascript and DOM, which at first I thought should be straightforward. So I started immediately. But soon I figured out that in order to create the reflection, I must be able to “flip” the original picture, which is immediately out of the capability of JavaScript and standard html! “Hmmm, so that’s why it wasn’t done before.”. However, right before I was going to give up, I found the solution. Which leads to the following.

Reflection Implemented!

Works on IE7.0 and Firefox 2.0. Didn’t test on other browsers. You may click here to see it in action or click the image to open the screenshot, if it is not working on your browser or is too slow to open.

Well…the effect is implemented, but by no means a feasibly one due to increased rendering overhead. But that’s the best I can do.
Because for each element needs reflection casted, there will be the “height of the element” number of clones of the exact same elements created to vamp the shadow.

The demo page can be found here. It may take a few seconds to load, although the file itself is fairly small.

Current features

• Reflection of images;
• Reflection of div elements, partially supports nested images and text;

So the reflection of text is an extension of the original idea.

(I will explain the algorithm later)

It’s implemented for proof-of-concept purpose. So the code is really badly organized and contains no documentation. I didn’t even bother to edit it in an IDE. Glad it got up and running as intended quite smoothly with little debugging. :)