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

Monthly.js : Plugin de jQuery para eventos en el calendario

Monthly.js : Plugin de jQuery para eventos en el calendario

InstaStream: plugin para mostrar imágenes desde Instagram

InstaStream: plugin para mostrar imágenes desde Instagram

Slick: el carrusel para jQuery

Slick: el carrusel para jQuery

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 Rotar Imágenes u otros elementos HTML con jQuery?

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

En esta entrada veremos como podemos rotar una imagen empleando un plugin de jQuery.

Andrés Cruz 29-07-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