lunes, 14 de septiembre de 2015

jQuery Bounce - Efecto rebote con jQuery y CSS3 animations


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>