This tutorial will run through the HTML, CSS and JavaScript (jQuery) required to create a basic bouncing ball animation complete with shadow. It is realistic up to a point – the ball does not take into account air resistance so it is therefore in a perpetually bouncing state.
To see what we’ll be creating, checkout the bouncing ball demo
The ball starts at a fixed height above the floor with a faded shadow underneath. As the ball falls, it speeds up and the shadow shrinks and becomes stronger. At the point of the bounce, the shadow is fully opaque and the ball is at its fastest point.
The HTML required for the bouncing ball is straightforward. We have divs for the ball, shadow and a containing div. We also link to 2 JavaScript files – jQuery and an easing plugin (more about this later).
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> </head> <body> <div id="container"> <div id="ball"></div> <div id="shadow"></div> </div> </body>
The CSS for these 3 divs are as follows. Both ball and shadow are absolutely positioned within the container and use the ‘border-radius’ property to make them rounded. A CSS gradient generator is also used to give the ball some highlighting and a slight 3D effect. The z-index of the ball is higher than that of the shadow so that it appears above it.
#container {
width:400px;
height:400px;
margin:auto;
position: relative;
background-color: #F5F5F5;
margin-top:40px;
border:1px solid #CCC;
}
#ball {
border-radius: 50%;
background-color: #AAA;
position:absolute;
left:50%;
z-index:2;
display:none;
border:1px solid #999;
/*------------- GRADIENT GENERATED FROM http://www.colorzilla.com/gradient-editor/ ----------------------- */
background: rgb(234,234,234); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(234,234,234,1) 1%, rgba(112,112,112,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(234,234,234,1)), color-stop(100%,rgba(112,112,112,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(234,234,234,1) 1%,rgba(112,112,112,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#707070',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#shadow {
border-radius: 50%;
background-color: #CCC;
position:absolute;
bottom:10px;
left:50%;
z-index:1;
display:none;
}
Here’s where we make our jQuery ball bounce! There are two functions to control the ball and shadow motion – ‘ballbounce’ and ‘ballshadow’ and 3 initial variables.
The variable ‘bouncetime’ controls the time it takes for the ball to fall and bounce up, ‘ballheight’ controls the highest point of the bounce and ‘ballsize’ determines the pixel diameter of both ball and shadow.
The CSS for the size and positioning of the ball and shadow is then set and the ball and shadow functions are called.
$(document).ready(function () {
var bouncetime = 1000;
var ballheight = 280;
var ballsize = 80;
$('#ball').css({'width':ballsize, 'height':ballsize, 'margin-left':-(ballsize/2),'display':'block', 'bottom':ballheight});
$('#shadow').css({'width':ballsize*1.5, 'height':ballsize/3, 'margin-left':-(ballsize*0.75),'display':'block', 'opacity':0.2});
ballbounce();
ballshadow();
function ballbounce() {
$('#ball').animate({'bottom':20}, bouncetime, 'easeInQuad', function() {
$('#ball').animate({'bottom':ballheight}, bouncetime, 'easeOutQuad', function() {
ballbounce();
});
});
}
function ballshadow() {
$('#shadow').animate({'width':ballsize, 'height':ballsize/4, 'margin-left':-(ballsize/2), 'opacity':1}, bouncetime, 'easeInQuad', function() {
$('#shadow').animate({'width':ballsize*1.5, 'height':ballsize/3, 'margin-left':-(ballsize*0.75), 'opacity':0.2}, bouncetime, 'easeOutQuad', function() {
ballshadow();
});
});
}
});
To get the motion of the bouncing ball correct, a key thing to get right is the use of easing – the speed of the animation over time.
jQuery comes with two kinds of easing modes – ‘swing’ (the default mode) and ‘linear’. Swing easing has a slow-fast-slow motion. i.e. the speed of the animation starts slow, speeds up (so that the top speed is halfway through the animation) and then slows down again. Linear easing on the other hand maintains a constant speed throughout the animation.
Neither of these easing modes are suitable for the motion of a bouncing ball. As the ball is dropped, the speed starts slow and increases until it hits the floor. At the point of bounce, the ball is at its fastest and slows back down until it reaches the top point.
We therefore need to alternate between slow-fast and fast-slow easing – more commonly referred to as ‘ease in’ and ‘ease out’.
To use ease-in and ease-out functions, we need to download the jQuery Easing Plugin which has a range of 30 easing functions. The functions ‘easeInQuad’ and ‘easeOutQuad’ I think give the most realistic bouncing ball motion.
Hello Tom Elliott,
Really it is good code and helpful for me.Thank a lot.