TransformJS: efectos con jQuery

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Con el siguiente plugin para jQuery se pueden realizar transformaciones y efectos en 3D y 2D utilizando las propiedades del framework y las propias de CSS.

Transform.js

Aunque el proyecto se encuentra en fase Beta, se puede utilizar para transformar y realizar, por ejemplo, efectos 3D y 2D en imagenes.

Para comenzar a utilizarlo sólo tendremos que descargar el plugin, descomprimirlo y copiar el siguiente código:

$(document).ready(function() {
        $('#forward').click(function() {
          $('#test').animate({
            translateX:'-=150',
            translateY:'+=150',
            scale:'+=2',
            rotateY: '+='+(2*Math.PI),
            rotateX: '+='+Math.PI,
            rotateZ: '+='+Math.PI
          },1500);
        });  

        $('#backward').click(function() {
          $('#test').animate({
            translateX:'+=150',
            translateY:'-=150',
            scale:'-=2',
            rotateY: '-='+(2*Math.PI),
            rotateX: '-='+Math.PI,
            rotateZ: '-='+Math.PI
          },1500);
        })
});

Esto crea dos animaciones. La primera al hacer clcik sobre el elemente #forward que aumenta la imagen usando un efecto 3D y la otra al pulsar sobre #backward que reduce la imagen usando el mismo efecto. Para ver la demo del efecto en funcionamiento puedes ir al sitio oficial del proyecto.

transformacion.js

Transform.js es compatible con la gran mayoría de navegadores modernos: Safari, Chrome, Firefox, Opera, e IE. Aunque no todas las propiedades están disponibles por igual, en la siguiente tabla podemos consultar el soporte.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.