Reflect-o-matic

May 25th, 2006

I put together Reflect-o-matic this afternoon. It’s a nice tool which demonstrates the options and functionality in Reflection.js but also allows people to create a reflection in their browser quickly which they could print screen and save as an image to use on their website or presentations.

Reflectomatic

The script will firstly ask you to provide the URL of the image you want to reflect. Click on "Go" when you’ve entered the URL. If you wish, you can use the sliders or the boxes to adjust the image scaling (image size) and the parameters of the reflection (opacity, reflection height).

You can also change the background colour if you don’t want a black background.

Reflect-o-matic will update the reflection as you move the slider so it’s really easy to perfect the look of the reflection. Finally, it’ll also give you the HTML code to include the reflection on your site.

It’s all done on the client side (how very AJAX!) so there is no uploading to the server or callbacks to the server. 

Downloadable Reflect-o-matic

The initial version of Reflect-o-matic allowed you to select an image from your hard drive which it would then reflect. Due to browser security, this version cannot be run from the web and will only work if you run it off your hard drive. If you want this version, download it here

Replace reflectomatic.html with the code here if you want it to allow you to input a URL. 

Feel free to copy/modify/improve Reflect-o-matic and to offer it to visitors on your website - however if you do so please make sure you are complying with the license of the slider script. 

A big thank you to Sunny Boy for help and assistance

Related Posts

  1. Reflect-o-matic Bookmarklet
  2. Reflect-o-matic v2
  3. Reflect-o-matic 2 now works in Opera
  4. Reflection.js 1.8
  5. Reflections

Trackback URI | Comments RSS

Leave a Reply