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.

Download reflex.js and include it into your webpage.

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

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.

• Initialisation class "reflex"
• vary the reflection by adding idistance followed by the desired height in pixel:
  Reflection distance class "idistance" - min=0 max=100 default=0
• vary the reflection by adding iheight followed by the desired height in percent:
  Reflection height class "iheight" - min=10 max=100 default=33
• vary the reflection by adding iopacity followed by the desired opacity in percent:
  Reflection opacity class "iopacity" - min=0 max=100 default=33
• vary the border by adding iborder followed by the desired wide in pixel:
  Border wide class "iborder" - min=0 max=100 default=0
• vary the border by adding icolor followed by the desired color as hex:
  Border color class "icolor" - min=000000 max=ffffff default=f0f4ff
• vary the 3D Z-Tilt direction by adding one of the following:
  Z-Tilt direction class "itiltright" or "itiltnone" or "itiltleft"
  by default "reflex.js" cycles through [right|none|left].

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}

Example:

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.

Example:

cvi_reflex.modify(document.getElementById("myimg"), { tilt: "left" });

Remove effect from an image using Javascript

cvi_reflex.remove(image);

• Fast and easy to implement. Just add class="reflex" to the image and your good to go.
• Don't need to spend time in an image editor creating an Cover Flow^™ image effect.
  *Cover Flow is a trademark of Apple Inc..
• Works really well with forum avatars. Doesn't require additional server work.
• It's dead easy to change the attributes of the images.
• Free of charge use on non-commercial and private web sites.

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

Please read the License before you download reflex.js 1.2

Please read the Frequently Asked Questions before you contact the author.

Version 1.2

• Added scriptable lib version cvi_reflex_lib.js

• Added IE support for itiltleft and itiltright

• Initial Release
• Added support for Internet Explorer 6/7
  (itiltleft and itiltright is still missing)

The inspiration for the script came from apples Cover Flow^™.

Please leave any comments at this contact formular.

reflex.js and cvi_reflex_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.