Adipoli: Plugin de jQuery para crear efectos hover

adipoli es un plugin para jQuery que facilita la tarea de crear efectos hover sobre las imágenes ya que dispone de una serie de transiciones predefinidas que podemos usar con facilidad.

Obviamente, se requiere tener jQuery; si no es así, puede ser cargado desde las API de Google agregando lo siguiente antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>

Descargamos el ZIP con el plugin, lo alojamos en un servidor externo y lo agregamos a continuación de lo anterior:

<script src="URL_jquery.adipoli.min.js" type="text/javascript"></script>

o lo añadimos directamente en la plantilla, copiando y pegando el contenido del archivo:

<script type='text/javascript'>
//<![CDATA[
  .. acá el contenido del archivo ...
//]]>
</script>

Por último unas pocas reglas de estilo que podemos agregar directamente en la plantilla y que no es necesario personalizar:

<style>
.adipoli-wrapper {display: inline-block; margin:auto; position:relative;}
.adipoli-wrapper>img {position: absolute; z-index: 1;}
.adipoli-before {position: absolute; z-index: 5;}
.adipoli-after {position: absolute; z-index: 10;}
.adipoli-slice {display:block;height:100%;position:absolute;z-index:15;}
.adipoli-box {display:block;position:absolute;z-index:15;}
</style>

¿Y cómo lo usamos? Sólo hay que agregar la función a cualquier selector así que sigo poniendo códigos:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('.efecto1').adipoli({'startEffect' : 'overlay','hoverEffect' : 'sliceUpDown'});
  $('.efecto2').adipoli({'startEffect' : 'overlay','hoverEffect' : 'fold'});
});
//]]>
</script>

En esos ejemplos, todas las imágenes cuyo atributo class es efecto1 se animarán de cierto modo y las que tengan la clase efecto2 de otro. Lo mismo podría hacer en Blogger para crear animaciones automáticas de las imagenes subidas ya que esta, tienen una clase denominada separator así que con esto, les agragría uno de los efectos:

$('.separator img').adipoli({'startEffect' : 'normal','hoverEffect' : 'popout'});

Lo que se ve entre las llaves son las opciones que, básicamente son dos, la primera indica como se verá la imagen inicialmente (normal, transparent, overlay o grayscale sólo si el documento es de tipo HTML5)

La segunda indica el efecto hover y puede ser cualquiera de estos valores: normal, popout, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpRandom, sliceUpDown, sliceUpDownLeft, fold, foldLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse.

Además, hay opciones extras que permiten controlar los detalles como la opacidad, velocidad, colores, márgenes y la manera en que serán tratados los textos pero, todo eso queda para que experimenten.

El resultado final podría ser algo como esto: