Cow’s Blog

May 23rd, 2006

Thanks for everyone who linked to, tried out and commented on the reflection.js script over the last few days. In case you didn’t notice, we made it onto the front page of Digg, Boing Boing, Del.icio.us/popular and some web design sites.

Implementations

Andrew posted some great info on how you can implement Reflection.js on your phpBB forum. It consists of a change to a couple of templates which will add the reflection effect to avatars. There is already an vBulletin modification.

Roderickm pointed me towards a theme for ZenPhoto (a simple PHP image gallery) which implements Reflection.

It’d be interesting to see an implementation for Lightbox. Might be interesting to see whether it also works well in the context of a Firefox extension such as the ones which display screenshots of all the tabs).

Other Reflection Scripts

A couple of people linked to some other reflection scripts:

• Dynamic Drive: This IE5+ only reflection script uses a couple of IE-only image filters to create an animated water wave effect.
• Script.aculo.us Reflector: This reflection script made the rounds about a month ago. It creates a reflection by creating tons of divs of differing opacities. In contrast, reflection.js uses one canvas or image with a gradient. The author of the reflector does say it’s more of a proof of concept. I believe that Reflection.js is at the stage where it can be used on production websites; it’s been around for 5 months and several different versions. The other main difference between the two is the Script.aculo.us Reflector probably needs a few dozen KB of JS and the Prototype library whilst Reflection.js is just 5KB.
• Improved Reflectors: An improved version of Reflection.js 1.0 and an improved version of the Script.aculo.us Reflector. It’s a shame that the release of the improved Reflection.js came at the same time as that of version 1.5 as a lot of work could have been saved

Problems

A common issue is another script takes over the window.onload attribute. This happens with Wordpress sometimes; you include reflection.js but Wordpress overwrites the window.onload handler with it’s own handler. The solution is to load reflection.js afterwards, modify the code so it doesn’t overwrite window.onload or use Reflection.js’ Javascript functions.

There are reports of crashes with Firefox 1.5.0.3 Mac UBs. This is a Firefox bug.

Usefulness

A common question is why anyone would use Javascript to do image reflections. I think it comes into it’s own with avatars or user-generated content. It’s also really easy to change the attributes of the reflection. There are a couple of others which aren’t listed on the reflection.js page:

Someone said it would save bandwidth as you’d only have to download the actual image rather than the image and the reflection. With a few large reflected images, you’d probably save more than 5KB of bandwidth which makes up for the size of the Reflection.js. I guess this could be true

Firefox 2.0 also supports Canvas toDataUrl() which is real sweet and theoretically you’d be able to get the browser to generate the reflection once and upload that onto the server so visitors in the future can download a pre-rendered reflection. Firefox can replace PHP or other server side languages. 

• Javascript , Reflection , Web Development
• Comments(1)