jueves, 10 de septiembre de 2015

jQuery rotate - Rotación de elementos con jQuery y CSS3 Animations


Hola, en esta ocasión os traigo un método (rotate) que sin duda os va a servir para dar rotación a cualquier elemento que necesitéis, todo ello gracias a CSS3 animations, elegante y configurable a vuestro gusto a través de la posibilidad de modificar sus propiedades: duration, delay, iteration_count, direction y timing_function. Los posibles valores para cada una de estas propiedades son los que ya vienen descritos en CSS3 animations. Por defecto el plugin viene configurado de la siguiente forma:

 var defaults = {
  duration: 1,
  delay: 0,
  iteration_count: 1,
  direction: "normal",
  timing_function: "linear"
 };


A continuación podéis ver algunos ejemplos de animación con jQuery rotate:


jQuery rotate basado en CSS3 animations

Básico

Propiedades: {duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"}

Propiedades: {duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"}

Propiedades: {duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"}




El código fuente del plugin con los ejemplos ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>

(function($){ 
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
 $.fn.rotate = function(options){
 var defaults = {
  duration: 1,
  delay: 0,
  iteration_count: 1,
  direction: "normal",
  timing_function: "linear"
 };
 if (options === undefined){options = defaults;}
 if (options.duration === undefined) {options.duration = defaults.duration;}
 if (options.delay === undefined) {options.delay = defaults.delay;}
 if (options.iteration_count === undefined) {options.iteration_count = defaults.iteration_count;}
 if (options.direction === undefined) {options.direction = defaults.direction;}
 if (options.timing_function === undefined) {options.timing_function = defaults.timing_function;}
 
 
 animation = "animation"+Math.floor((Math.random() * 1000000000000000) + 1);
 
 this.find(".style-rotate").remove();
 
 //Normal
 this.append("<style class='style-rotate'>@keyframes " + animation + " {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}</style>");
 this.css("animation-name", ""+animation+"");
 this.css("animation-duration", ""+options.duration+"s");
 this.css("animation-delay", ""+options.delay+"s");
 this.css("animation-iteration-count", ""+options.iteration_count+"");
 this.css("animation-direction", ""+options.direction+"");
 this.css("animation-timing-function", ""+options.timing_function+"");
 //webkit: Chrome, Safari, Opera 
 this.append("<style class='style-rotate'>@-webkit-keyframes " + animation + " {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);}}</style>");
 this.css("-webkit-animation-name", ""+animation+"");
 this.css("-webkit-animation-duration", ""+options.duration+"s");
 this.css("-webkit-animation-delay", ""+options.delay+"s");
 this.css("-webkit-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-webkit-animation-direction", ""+options.direction+"");
 this.css("-webkit-animation-timing-function", ""+options.timing_function+"");
 //moz: firefox 
 this.append("<style class='style-rotate'>@-moz-keyframes " + animation + " {from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);}}</style>");
 this.css("-moz-animation-name", ""+animation+"");
 this.css("-moz-animation-duration", ""+options.duration+"s");
 this.css("-moz-animation-duration", ""+options.delay+"s");
 this.css("-moz-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-moz-animation-direction", ""+options.direction+"");
 this.css("-moz-animation-timing-function", ""+options.timing_function+"");
 };
})(jQuery);

 $(function(){
  $("#box-1").rotate();
  $("#box-2").rotate({duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"});
  $("#box-3").rotate({duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"});
  $("#btn").on("click", function(){
   $("#box-4").rotate({duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"});
  });
 });
</script>

<style>
 #box-1{
  width: 150px;
  height: 150px;
  background-color: orange;
 }
 
 #box-2{
  width: 150px;
  height: 150px;
  background-color: green;
 }
 
 #box-3{
  width: 150px;
  height: 150px;
  background-color: pink;
 }
 
 #box-4{
  width: 150px;
  height: 150px;
  background-color: yellow;
 }
</style>

</head>
<body>
<h1>jQuery rotate basado en CSS3 animations</h1>
<h3>Básico</h3>
<div id="box-1"></div>
<h3>Propiedades: {duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"}</h3>
<div id="box-2"></div>
<h3>Propiedades: {duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"}</h3>
<div id="box-3"></div>
<h3>Propiedades: {duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"}</h3>
<button id="btn">Click me!!</button>
<div id="box-4"></div>
</body>
</html>