JAVASCRIPT

Creating Bouncing Effects with the GX JavaScript Animation Framework

In this third part of a series of articles on the GX JavaScript animation framework, you'll learn how to add bouncing effects to simple divs. You'll be surprised at how easy it is to do.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

January 22, 2010

TABLE OF CONTENTS:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Click on the div below to change its width and background color</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

In this particular example, the library’s “gx()” method has been called with the width and background color that will be assigned to the selected div when the animation is finally completed. This process is represented by the following figure:

Not too bad, huh? Nevertheless, if this small demonstration of what GX can really do with HTML elements isn’t good enough for you, I suggest you look at the code sample below. It implements a similar animation, but in this case by modifying the div’s height and its assigned background color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// change the height and background color of the targeted div element

$(document).ready(function(){

$('#container').click(function(){

$('#container').gx({'height': 300, 'background-color': '#ff8040'}, 1000, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<h2>Header section</h2>

</div>

<h2>Click on the div below to change its height and background color</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Considering that this last code sample doesn’t bear any further explanation, you should look directly at the following image. Again, it graphically represents the initial and final states of the previous animation:

And to finish this summary, here’s a final example that shows how to create a parallel animation by changing the width, height and background color of the same div, all at the same time. Enjoy it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Using the GX Animation Library</title>

// change the width, height and background color of the targeted div element

$(document).ready(function(){

$('#container').click(function(){

$('#container').gx({'width': 600, 'height': 300, 'background-color': '#ff8040'}, 1000, 'Linear');

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#container {

width: 300px;

padding: 10px;

background: #ffffc0;

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Using the GX Animation Library</h1>

<h2>Header section</h2>

</div>

<h2>Click on the div below to change its width, height and background color</h2>

<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

Want to see the output generated by this example? All right, here it is:

Now that performing parallel animations with GX is familiar to you, it’s time to explore a few more useful features that come with the library. So, in accordance with the concepts deployed in the introduction, in the segment to come I’ll be explaining how to add a truly appealing bouncing effect to an animation.

Now, to learn the full details of this process, click on the link below and keep reading.

Next: Adding bounce to animations >>