Turntable.js, plugin de jQuery para hacer sliders responsivos

martes, mayo 03, 2016
COMPARTE EL POST

Turntable.js, plugin de jQuery para hacer sliders responsivos

Turntable.js es un plugin de jQuery extremadamente sencillo que nos permite hacer efectos de rotación con el mouse o cursor para simular el efecto de movimiento con imágenes. El ejemplo se puede ver directamente desde el sitio web del plugin pero entre los efectos más usados para este script están el poder hacer rotar accesorios en 360° para ver cómo se ven los productos, o para hacer animaciones que se muevan conforme se mueve el cursor. A continuación un ejemplo de lo fácil que es configurarlo.

image

El HTML para nuestro caso tiene que ser una lista con las imágenes que vamos a hacer para simular el efecto de rotación. Cada imagen debería representar un estado diferente de la animación.

image

El JS es la parte más sencilla porque solo hacemos referencia a la capa principal que contiene la galería de imágenes.

image

El CSS consta básicamente de modificar los márgenes de nuestra lista y colocar los elementos individuales en forma de bloque para cuando la imagen correspondiente deba estar activa, y las demás ocultas para hacer el efecto.

¡Síguenos en Twitter!


Deja tu comentario