DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
29-07-2014

Cuando creamos una página web ya sea que esta forme parte de un sistema mayor o no, nos vemos en la necesidad de utilizar JavaScript por muchas razones, validaciones, manejo de datos o hacer que los elementos de la página (como imágenes) sean interactivos; una forma de hacerlos interactivos es rotándolos; en esta entrada veremos como podemos rotar imágenes empleando un plugin de jQuery:

jQuery Rotate

jQuery Rotate es un plugin para jQuery que permite rotar los elementos que conforman nuestra página web sin complicaciones y sin emplear CSS3 en navegadores antiguos (los cuales no tienen soporte) y de esta forma mantener la compatibilidad entre los navegadores web de un versiones menores:

Soporte de los navegadores web más utilizados con jQuery Rotate

Instalando jQuery Rotate

Primero nos descargamos el plugin desde la página oficial de jQuery Rotate.

Y lo agregamos a nuestra página web mediante:

<script type="text/javascript" src="nuestra-ruta/jQueryRotateCompressed.js">>/script>

Funcionamiento de jQuery Rotate

Para emplear jQuery Rotate basta con realizar una llamada a la función rotate indicando el ángulo en alguna de las siguientes formas:

$("#logoDesarrolloLibre").rotate(80);

o

$("#logoDesarrolloLibre").rotate(({angle:80}));

Más ejemplos de los posibles usos de jQuery Rotate

Animando las rotaciones

Podemos animar las rotaciones:

var rotation = function (){
   $("#logoDesarrolloLibre").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
}
rotation();

Animando las rotaciones mediante el setInterval

Podemos animar las rotaciones mediante setInterval para una mejor configuración de la velocidad de la rotación en el tiempo:

var angulo = 0;
setInterval(function(){
      angulo+=3;
     $("#logoDesarrolloLibre").rotate(angulo);
},10);

Animando las rotaciones mediante eventos

Y por supuesto, podemos realizar las animaciones mediante eventos click, mouseover, mouseout, etc:

$("#logoDesarrolloLibre").rotate({ 
   bind: 
     { 
        click: function(){
            $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
        }
     } 
   
});

Entre otras formas que podrás encontrar en la documentación oficial sección ejemplos.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

3D Box Control conTweenMax

3D Box Control conTweenMax

Slick: el carrusel para jQuery

Slick: el carrusel para jQuery

jQuery sharebox, plugin para compartir contenido

jQuery sharebox, plugin para compartir contenido

Algunos artículos que te pueden interesar

Detección de caras con jQuery

Detección de caras con jQuery

El plugin FaceDetection permite reconocer caras en imágenes e incluso videos; su funcionamiento es muy sencillo.

Andrés Cruz 03-11-2014

¿Cómo mostrar hojas de cálculo de Google Sheets con jQuery?

¿Cómo mostrar hojas de cálculo de Google Sheets con jQuery?

jQuery Sheetrock podemos mostrar los datos de las hojas de cálculo fácilmente en cualquier sitio web.

Andrés Cruz 06-11-2014

Detectando la Orientación de un dispositivo con jQuery Mobile

Detectando la Orientación de un dispositivo con jQuery Mobile

En esta entrega veremos como podemos detectar o capturar la rotación de un dispositivo con jQuery Mobile.

Andrés Cruz 17-07-2014