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 uses unobtrusive javascript to keep your code clean.

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.

CVI-lab: Get a fast impression of the effects and their illustration qualities.

Setting Up

Download "reflex.js" and include it into your webpage.

<script type="text/javascript" src="reflex.js"></script>

Using It

To get the effect just add a class="reflex" to the image (minimum dimension: 32x32).
The needed vertical space of the canvas element will grow by the height of the reflection, plus the height of the distance.



If you want flexibility, use "cvi_reflex_lib.js" instead of "reflex.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).

Set defaults using Javascript
cvi_reflex.defaultTilt = 'none'; //STR 'n|l|r'-'none|left|right'
cvi_reflex.defaultHeight = 33; //INT 10-100 (%)
cvi_reflex.defaultDistance = 0; //INT 0-100 (px)
cvi_reflex.defaultTransparency = 50; //INT 1-100 (%)
cvi_reflex.defaultBorder = 0; //INT 0-20 (px)
cvi_reflex.defaultColor = '#ffffff'; //STR '#000000'-'#ffffff'
cvi_reflex.defaultBoxmode = false; //BOOLEAN

Add images using Javascript
cvi_reflex.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {tilt: value, height: value, distance: value, transparency: value, border: value, color: value, boxmode: value}
cvi_reflex.add(document.getElementById("myimg"), { height: 25, distance: 10 });

Modify images using Javascript
cvi_reflex.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.
cvi_reflex.modify(document.getElementById("myimg"), { tilt: "left" });

Remove effect from an image using Javascript


Shows some of the things "reflex.js" does.

First 3 images with class "reflex" only, last 3 with "idistance?? iheight?? iopacity?? iborder? icolor??????" ...

"reflex iopacity50"

"reflex iopacity75"

"reflex iopacity25"


Images used are copyrighted and are used for demonstration only.

Why use Javascript Reflex Image?

In older browsers, the script degrades and your visitors won't notice a thing.


Opera do not support printing of canvas.


Version 1.2 Version 1.1 Version 1.0


The inspiration for the script came from apples Cover Flow.


Reflex.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only. There are also Commercial Software Licenses available.

Images used are copyrighted and are used for demonstration only.  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB