Canvas Demos

Reflection.js

• Canvas Tool
• Posted on February 27th, 2009

Reflection.js is a JavaScript file which allows you to add reflections to images on your webpages. The script works by searching the document for images with the class reflect. Every time it finds one, it generates a new canvas element. Using the options specified, it then produces a reflection image.

Reflection.js

It’s very quick and simple to include in any web page where you would like a reflection effect. Simply:

1. Download the Reflection.js file from the website.
2. Add a script tag referencing the JavaScript file.
3. Add the class “reflect” to the image.
4. Refresh your page!

There are a host of other options available to tailor your reflection effect, which can be read about it in further detail in the Reflection.js readme file.

Reflection.js works in all the major browsers – Internet Explorer 5.5+, Firefox 1.5+, Safari, Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. It uses unobtrusive JavaScript and is less than 5kb in size!

Download the Reflection.js tool, or try the demo with your own image.

• • delicious
  • Digg
  • Facebook
  • LinkedIn
  • Reddit
  • Stumbleupon
  • Technorati
  • Twitter