Smart 3D es un plugin jQuery que permite lograr un efecto 3D. Se trata de una animación que se desplaza al mover sobre la imagen el puntero del ratón, estas imágenes superpuestas se mueven creando, creando un escenario virtual con ilusión de profundidad, el efecto que utiliza es el parallax.
Implementando la animación
La implementación es sumamente sencilla, el siguiente es el código Javascript:
$ ( function () {
$ ( '# Mindscape' ). Smart3D (850);
});
El HTML que mostrará la animación es una estructura de lista:
<ul id="Mindscape"> <li><img src=".../ mindscape1.png"/></li> <li><img src=".../ mindscape2.png"/></li> </ul>
Por último se necesita unos estilos CSS:
#Mindscape {
width : 750px ;
height : 174px ;
}
La principal ventaja de esta implementación, es es muy sencilla de agregar a cualquier desarrollo web y los resultado finales son muy vistosos y elegantes.
Otra implementación similar es el tuorial: Cómo crear un paisaje animado con jQuery y CSS
Smart 3D – plugin jQuery
Descargar: tympanus.net/codrops/2011/01/10/collective-smart3d-jquery-plugin
Demo: 4coder.info/demo/jquery-smart3D