Ilustraciones interactivas con jQuery

Les recomiendo que visiten el sitio del plugin en donde podrán ver unos ejemplos de su utilización. zLayer es un plugin jQuery para realizar animaciones a imágenes según la posición del puntero del mouse, con tan solo unas líneas de código podremos animar imágenes en distintos niveles de profundidad y orientación de movimiento.

Algo interesante de este plugin es que podemos definir con bastante precisión el tipo de movimiento que queremos lograr en base a la posición del mouse, podemos definir parámetros como la distancia del movimiento mediante su limitación. O bien la superposición de distintos elementos dispuestos en nuestro documento.

La forma de trabajar en capas se logra muy fácilmente utilizando la propiedad z-index desde nuestra hoja de estilo, del resto de los aspectos se encarga el plugin según le indiquemos en su inicialización.

Lo fantástico de este plugin es que los limites están en nuestra imaginación a la hora de crear ilustraciones animadas, por ejemplo podemos decidirnos por crear un movimiento del fondo según se avance en el descubrimiento de nuestro sitio, o bien animar nuestro logo o mascota en caso de tenerla 😛

Ejemplo de inicialización:

$(document).ready(function(){
    $('.background').zlayer({mass:15,confine:'y',canvas:'#container'});
    $('.guy').zlayer({mass:8,force:'push',canvas:'#container'});
    $('.guys').zlayer({mass:5,force:'push',canvas:'#container'});
});

Les recomiendo que visiten el sitio del plugin en donde podrán ver unos ejemplos de su utilización.

Web del plugin: zLayer