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
My passion is helping people to get the most out of their mobile phone. I've been blogging at Ken's Tech Tips since 2005.
Aside from writing about mobile technology, my interests are in software development, digital marketing and physics. Outside of the blog, I work with numerous technology companies helping them to explain their product and helping them to market it to consumers. Please get in touch for more information.