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>
No hay comentarios:
Publicar un comentario