Cow’s Blog

March 26th, 2006

Reflection.js introduced us to image reflections on the web using Javascript and the HTML 5 canvas element. This was all very well and it showcased canvas, one of the most promising technologies on the web, but the lack of support for Internet Explorer made it useless for some.

See a demo of the cross browser image reflection. 

For that reason, I decided to try to port reflection.js so it would work in Internet Explorer. I have produced a script which tries to keep the principles of reflection.js - unobtrusive javascript, clickability, tidy HTML, etc. whilst adding support for Internet Explorer.

It’s worth pointing out that in Internet Explorer, you can even add reflections to animated images (see demo). I think this is a pretty neat feature and something which would take quite a bit of work if you tried to do it in an image editor. 

How it works

Take a look at the source code. 

Firefox, Opera and Safari all support the canvas element which allows some really cool things to be done with images. In these browsers, we use <canvas> to produce a reflection by cropping, scaling, etc. This code is taken from the original reflection script and is unmodified.

Internet Explorer doesn’t support canvas so instead we use DirectX image transformations.

1. Firstly, we create a <div> element half the height of the original image and set the original image as the background. The background-position CSS property is used to "crop" the image so only the bottom half is visible. This is the same method used in CSS sprites.
2. The div is turned upside using DirectX transformations. This bit of CSS turns an element upside down:

   filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)

3. Next, a vertical gradient is added onto the div. One end of the gradient is opaque white meaning none of the image is visible. On the other end, the gradient will be partially transparent. This gives the reflection effect. The following CSS adds a vertical gradient:

   filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0')

   Two more lines of code are needed to set the colour and opacity of the gradient:

   reflection.filters.item("DXImageTransform.Microsoft.Gradient").StartColor = 0xffffffff;reflection.filters.item("DXImageTransform.Microsoft.Gradient").EndColor = 0xaaffffff;

   See Microsoft’s documentation on the StartColor property.

4. Finally, a new container div is created which contains the original image and the reflection. This new div element will take the original image’s CSS properties so floats, borders, paddings should continue to work. The container div replaces the original image in the document. (This step applies to all browsers)

The Javascript will automatically look for all images with the "reflect" class and repeat the process for each of them. 

View demo. 

• Javascript , Reflection , Web 2.0 , Web Development
• Comments(5)