December 17th, 2005
This post is from 2005 and refers to an old script. It’s now been deprecated. See GitHub for the final version from 2008. For a more up-to-date version of the script, please see Reflection.js for jQuery.
I’ve got the reflection script I mentioned earlier up to a workable state.
You can view the demo here. You need a browser which supports the canvas tag – Firefox 1.5, Opera 9 Preview or Safari 2.
How it works
The script then creates a new div element with two child elements – the original image and the canvas reflection. It will replace the original image with this div.
- Degrades nicely in browsers which don’t support canvas
- Automatically fades into the background colour
- Original image is still a real image in HTML and can be right clicked
- Keeps your HTML tidy
I'm a freelance writer specialising in mobile technology. I've been blogging at Ken's Tech Tips since 2005 with the aim of demystifying mobile technology for the rest of us.
Before writing about mobile technology, my background was in space & atmospheric physics. I have also worked in software development. Nowadays, I help companies to explain mobile technology to their customers. Please check out my portfolio or get in touch for more information. I'm also on Google+.