Efecto de enrollamiento en imágenes mediante JavaScript

Nos enteramos via xyberneticos que luego de las ya recomendadas Glossy.js 1.3 y Instant.js 1.0, veo en ajaxian que Christian Effenberger nos trae otro nuevo script con nuevo efecto para que utilices en tus sitios web. Curl.js esta vez nos permitirá agregarle a nuestras fotos un efecto de enrollamiento animado al pasar el mouse o fijo si lo desearamos asi, con lo que básicamente evitaremos tener que realizar este efecto de forma manual utilizando siempre un editor de imágenes.
Curl.js funciona muy bien con todos los navegadores “importantes” - Mozilla Firefox 1.5+, ópera 9+ y safari. Pero en IE viejos no se vera ninguna modificación, lo que nos es problema ya que los usuarios no notaran ninguna diferencia, simplemente verán la imagen de forma normal.
Instalación:

Primero descargamos la librería Curl.js y la alojamos en nuestro servidor.
Hacemos el llamado a la librería agregando en nuestro encabezado, antes de la etiqueta < / HEADER > lo siguiente:

PLAIN TEXT

java script:

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

NOTA: Verificamos bien en “src” que la localización del script sea la correcta.
Modo de uso:
Cuando deseamos usarla agregamos a nuestras imágenes la clase “curl”
EJ:
PLAIN TEXT

HTML:

1.
<img class="curl" src="images/foto.jpg"/>


Otros Parámetros:

isize: nos permite variar del efecto el tamaño del enrollamiento, en caso de que deseamos hacerlo agregamos el parametro “ isize” seguido por el tamaño deseado en porcentaje: De forma default es 33.
Ej
PLAIN TEXT

HTML:

1.
<img class="curl isize75" src="images/foto.jpg"/>


icolor: Nos permite cambiar el color del enrollamiento que acompaña a la imagen. Lo hacemos agregando “ icolor” seguido por el color expresado en hexadecimal. minimo=000000 maximo=ffffff default=0
Ej:
PLAIN TEXT

HTML:

1.
<img class="curl icolor33240A" src="images/foto.jpg"/>


Ishadow: nos permite variar la opacidad de la sombra. Para cambiarla lo haremos agregando la clase “ishadow” seguido por la opacidad en porcentaje:
minimo=0 max=100 default=66
Ej
PLAIN TEXT

HTML:

1.
<img class="curl ishadow30" src="images/foto.jpg"/>


Combinar mas de un parámetro a la vez:
En caso de desearlo así, podremos usar todos los parámetros a la misma vez.
Ej:
PLAIN TEXT

HTML:

1.
<img class="curl icolor33240A ishadow30 isize44" src="images/foto.jpg"/>


Con Animación
Si deseas flexibilidad, puedes utilizar “cvi_curl_lib.js” en vez de “curl.js”. Con ella puedes hacer que tus enrollamientos responden a las acciones del usuario (e.g. cambiando el tamaño del enrollamiento cuando se asoma la imagen encima). Demo

Gracias, Muchas Gracias