En esta ocasion os traigo un método jQuery llamado bounce que te permitirá asignar un efecto bounce (rebote) a los elementos visibles del DOM html, para el efecto se utiliza CSS3 animations. por ejemplo, al hacer click o pasar el mouse sobre una imagen o tal vez un determinado div puedes mostrar un atractivo efecto rebote como podrás ver en los diferentes ejemplo que vienen a continuación.
Opciones por defecto del plugin:
defaults = {
pixels: 20,
duration: 0.5,
delay: 0,
iteration_count: 1,
direction: 'normal',
timing_function: 'linear'
};
Haz click en los círculos para ver el efecto Bounce
Default
{pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'}
{duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'}
Pasa el mouse sobre la siguiente imagen ...
Código fuente del plugin con los ejemplos ...
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<script>
//Author: Manu Dávila | Web: http://jquery-manual.blogspot.com
(function($){
$.fn.bounce = function(options){
defaults = {
pixels: 20,
duration: 0.5,
delay: 0,
iteration_count: 1,
direction: 'normal',
timing_function: 'linear'
};
if (options === undefined){options = defaults;}
if (options.pixels === undefined) {options.pixels = defaults.pixels;}
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;}
b_plus_width = new Array();
b_plus_height = new Array();
b_plus_width[0] = parseInt(this.width()+options.pixels);
b_plus_height[0] = parseInt(this.height()+options.pixels);
b_plus_width[1] = parseInt(this.width()+(options.pixels / 1.8));
b_plus_height[1] = parseInt(this.height()+(options.pixels / 1.8));
b_plus_width[2] = parseInt(this.width()+(options.pixels / 1.4));
b_plus_height[2] = parseInt(this.height()+(options.pixels / 1.4));
b_plus_width[3] = parseInt(this.width()+(options.pixels / 1.2));
b_plus_height[3] = parseInt(this.height()+(options.pixels / 1.2));
b_less_width = new Array();
b_less_height = new Array();
b_less_width[0] = parseInt(this.width()-options.pixels);
b_less_height[0] = parseInt(this.height()-options.pixels);
b_less_width[1] = parseInt(this.width()-(options.pixels / 1.2));
b_less_height[1] = parseInt(this.height()-(options.pixels / 1.2));
b_less_width[2] = parseInt(this.width()-(options.pixels / 1.4));
b_less_height[2] = parseInt(this.height()-(options.pixels / 1.4));
b_less_width[3] = parseInt(this.width()-(options.pixels / 1.8));
b_less_height[3] = parseInt(this.height()-(options.pixels / 1.8));
animation = "animation"+Math.floor((Math.random() * 1000000000000000) + 1);
this.find(".style-bounce").remove();
this.append("<style class='style-bounce'>@keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</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+"");
this.append("<style class='style-bounce'>@-webkit-keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</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+"");
this.append("<style class='style-bounce'>@-moz-keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</style>");
this.css("-moz-animation-name", ""+animation+"");
this.css("-moz-animation-duration", ""+options.duration+"s");
this.css("-moz-animation-delay", ""+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").on("click", function(e){
$("#box-1").bounce();
});
$("#box-2").on("click", function(e){
$("#box-2").bounce({pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'});
});
$("#box-3").on("click", function(e){
$("#box-3").bounce({duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'});
});
$("#img").on("mouseover", function(e){
$("#img").bounce({pixels: 10, duration: 1, timing_function: 'ease-in-out'});
});
});
</script>
<style>
#box-1{
background-color: orange;
width: 50px;
height: 50px;
border-radius: 50%;
}
#box-2{
background-color: green;
width: 50px;
height: 50px;
border-radius: 50%;
}
#box-3{
background-color: pink;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>jQuery bounce</h1>
<h3>Default</h3>
<div id="box-1"></div>
<h3>{pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'}</h3>
<div id="box-2"></div>
<h3>{duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'}</h3>
<div id="box-3"></div>
<h3>Pasa el mouse sobre la siguiente imagen ...</h3>
<img id="img" src="http://2.bp.blogspot.com/-47cR4Yc9VPE/VfFdBJcaQZI/AAAAAAAAIi0/p-MlHfSMpns/s1600/jquery.png" />
</body>
</html>
No hay comentarios:
Publicar un comentario