Cómo crear la animación de una pelota botando mediante jQuery

En este artículo aprenderemos a crear un efecto de animación de una pelota que rebota utilizando jQuery. Este efecto de animación se crea a partir de diferentes parámetros, como el conteo de saltos, la velocidad, etc. En otros tutoriales ya hemos visto más ejemplos sobre cómo trabajar con animación en jQuery.

En este ejemplo, veremos cómo hacer botar una pelota de ping pong en la parte inferior de un elemento DIV. Al hacer clic en la pelota, llamaremos a la función de jQuery que creará una animación de rebote con la pelota. Por supuesto, tendremos que pasarle el conteo de rebote y la velocidad a dicha función. En función de estos parámetros, calcularemos la altura del rebote y la relación de la velocidad para así lograr una buena animación con jQuery animate().

Código HTML y estilos de la pelota que rebota

En el siguiente código muestro el HTML y los estilos que utilizaremos para mostrar la imagen de la pelota. Al hacer clic en la pelota, ejecutaremos la función de animación.

<style>
#bouncing-ball {
	height: 100px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -50px;
}

#outterDiv {
	height: 340px;
	background: #36a094;
	position: relative;
}

.banner-info {
	padding: 15px;
	color: #FFF;
}
</style>
<h1>Demo Bouncing Ball Animation using jQuery</h1>
<div id="outterDiv">
    <div class="banner-info">Click the ball to see the
        bouncing animation</div>
    <img id="bouncing-ball" src="bouncing-ball.png"></img>
</div>

Función de animación de rebote

En el siguiente código puedes ver la función de jQuery para crear la animación de rebote en el elemento de imagen que muestra la pelota. Los parámetros que debe recibir son las veces que debe rebotar (el contador de rebotes) y la velocidad de rebote. Mediante estos parámetros, se calculará la altura de la pelota en cada rebote y definiremos la propiedad de cada animación mediante la función animate() de jQuery.

<script src="jquery-3.2.1.min.js"></script>
<script>
	function bounce(bouncingCount, speed) {
		var top = 200;
		var speedRatio = speed / top;
		var heightRatio = top / bouncingCount;

		for (var i = 1; i <= bouncingCount; i++) {
			$('#bouncing-ball').animate({
				'bottom' : top
			}, speed);
			$('#bouncing-ball').animate({
				'bottom' : 0
			}, speed / 2);
			top = top - (heightRatio);
			speed = speedRatio * top;
		}
	}

	$("#bouncing-ball").click(function() {
		bounce(10, 500);
	});
</script>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP