Imagenes con efecto cubo

Desde que descubrí jQuery no se me ocurre otra cosa mas que experimentar con el, y buscando en su API y documentación econtre este efecto muy interesante.... Es una animación del tipo slide con efecto de cubo, primero que nada debemos descargar la librería y cargarla antes de "/head" en nuestra página....

   Recomiendo utilizar la versión "pack" que pesa unos 9.8 Kb, la versión min pesa 12.6 Kb y la estándar 25.1 Kb. Ahora el código es el siguiente:


//El html...

   Y el resultado final es el siguiente...




   Pero las posibilidades son muchas, por ejemplo, si queremos que el cubo tenga un efecto cargamos la libreria "UI" de jQuery y le adicionamos efectos a nuestro cubo, de modo que nos queda lo siguiente:
//Librerías...




//Script de jQuery


//El html...

   Y el resultado sería:




   Los efectos están definidos por "easing" y la velocidad por "speed", un listado de ellos es la siguiente:
Nombre Efecto
swing swing
easeInQuad in quadratic
easeOutQuad out quadratic
easeInOutQuad in/out quadratic
easeInCubic in cubic
easeOutCubic out cubic
easeInOutCubic in/out cubic
easeInQuart in quartic
easeOutQuart out quartic
easeInOutQuart in/out quartic
easeInQuint in quintic
easeOutQuint out quintic
easeInOutQuint in/out quintic
easeInSine in sine
easeOutSine out sine
easeInOutSine in/out sine
easeInExpo in exponential
easeOutExpo out exponential
easeInOutExpo in/out exponential
easeInCirc in circular
easeOutCirc out circular
easeInOutCirc in/out circular
easeInBack in back
easeOutBack out back
easeInOutBack in/out back
easeInBounce in bounce
easeOutBounce out bounce
easeInOutBounce in/out bounce




   NOTA: en caso de no ver bien los ejemplos visita el enlace externo para ver la demostración, aún tengo problemas en implementar todos los scripts, en caso de que diga que hay virus no se preocupen, simplemente bloqueen el script que se esta ejecutando y listo, gracias.

1 Comentarios:

Escribir Comentario

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon