javascript reflections

By enhancing the way a site looks javascript reflections add an easy mode to reflect your images on the site without the need of an image manipulation program to be used on each one. A handy tool for very dynamic pages. Some of these scripts will be presented below.

3d image reflexion

3d image reflexion

Based on prototype and scriptaculous, this script is unobtrusive, makes preload and is crossbrowser. On author site there is a demo on black background too.

reflex.js 1.2

reflex.js 1.2

“reflex.js 1.2 allows you to add a Cover Flow™ effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.
It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it’ll degrade and your visitors won’t notice a thing. ”

Reflection Factory

Reflection Factory

A dual effects , this mootools based script allows you to add shadows and reflections to images, with different parameters like amount,distance,opacity.

Reflection.js for mootools

Reflection.js for mootools

This is an improved version of the reflection.js script rewritten for mootools. It allows to add instantaneous reflection effects to your images in modern browsers, in less than 3kb.

The original script is:

Reflection.js

Reflection.js

“Features

  • Fun and easy to implement! Just add class=”reflect” to your images
  • Automatically blends into background colours or images
  • It’s easy to vary the reflection height and opacity
  • Can respond to user actions through Javascript
  • Degrades in older browsers; they won’t notice a thing!
  • It’s smaller in size than most images; under 5KB!

script.aculo.us Reflector

script.aculo.us Reflector

as the name suggest, is based  on scriptaculous. It allows some params  – like amount and opacity

Javascript image reflection

Javascript image reflection

You won’t find much info on the site so you will have to digg the code to see how it’s working. Anyway, it seems to support distance from main image, opacity and transparent gifs (no safari).

If you know other resources on this subject, please let me know.