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.

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.

Classes

• 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].

Scripting

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);

Demonstration

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?

• Fast and easy to implement. Just add class="" 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.

Restrictions

Opera do not support printing of canvas.

History

• 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)

Credits

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

License

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.

cvi.netzgesta.de  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB