Demo
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.
How to use
<html>
<head>
<title>Reflex.js (with IE 6/7 support)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="reflex.js"></script>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.demo { float: left; padding: 5px; }
</style>
</head>
<body>
<div class="demo"><a href="images/left.jpg">
<img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></a>
<small><br>"<tt>reflex iopacity50</tt>"</small></div>
<div class="demo"><a href="images/none.jpg">
<img src="images/none.jpg" width="200" class="reflex iopacity75" alt="" /></a>
<small><br>"<tt>reflex iopacity75</tt>"</small></div>
<div class="demo"><a href="images/right.jpg">
<img src="images/right.jpg" width="200" class="reflex iopacity25" alt="" /></a>
<small><br>"<tt>reflex iopacity25</tt>"</small></div>
</body>
</html>
More info
http://www.netzgesta.de/reflex/
Demo
Filmed.js 1.1 allows you to add film strips and shadow to images on your webpages (alternatively: slided.js). It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing.
How to use
<html> <head> <title>Filmed.js (with IE 6/7 support)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-language" content="en"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="filmed.js"></script> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <table summary=""> <tr><td valign="top" style="padding-bottom: 1em; white-space: nowrap;"> <img src="images/film.jpg" border="0" class="filmed ishine30" alt="" /> </td> <td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"> <img src="images/girl.jpg" class="filmed ishadow50"> </td></tr> </table> </body> </html>
More info
http://www.netzgesta.de/filmed/
Glossy.js 1.4 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). 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.
how to use
<html>
<head>
<title>Glossy.js (with IE 6/7 support)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-language" content="en">
<script type="text/javascript" src="glossy.js"></script>
<style type="text/css">
<!--
.style {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
-->
</style>
</head>
<body>
<table>
<tr>
<td align="center" valign="middle">
<span class="style"><img src="images/3.jpg" border="0"><br>
not use</span></td>
<td align="center" valign="middle"><span class="style">
<img src="images/3.jpg" border="0" class="glossy" alt="glossy.js"><br>
use</span></td>
</tr>
</table>
</body>
</html>
more info
http://www.netzgesta.de/glossy/
Statistics