JAVASCRIPT

Making Bouncing Effects in Parallel with the GX JavaScript Animation Framework

In this fourth installment of a series, I provide you with some friendly examples that show how to use the GX library for creating an appealing bouncing effect when performing parallel animations on a target div. The process is extremely simple, so you shouldn’t have major trouble if you need to implement this kind of effect on your own web pages.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

January 26, 2010

TABLE OF CONTENTS:

Regardless of its apparent complexity, the truth is that adding a bouncing effect to a parallel animation with the GX library is a very easy task. As with other examples shown in this and previous tutorials, the whole process is reduced to calling the familiar “gx()” method with the proper number of arguments and nothing else.

Nevertheless, if you wish to understand more clearly how this slightly complex animation can be performed in a simple fashion, focus your attention on the example below:

<!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>

// use bounce easing to change the width and height of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'width': 600, 'height': 300}, 3000, 'Bounce');

});

</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>

<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>Using bounce easing to change the width and height of the targeted div element</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>

If you ever thought that creating a bouncing parallel animation was a difficult process, then you should breathe easy, since the previous example demonstrates exactly the opposite. This shows in a nutshell two things about the GX library: first, its easy learning curve, especially when it comes to creating more sophisticated effects; and second, the remarkable flexibility offered by its “gx()” method. In this case, you get the best of both worlds.

And now that I mentioned the term “flexibility,” it’d be really useful to create a final example that shows how to animate three properties of the same sample div and add to the animation the additional bouncing “touch.” Want to learn how this will be done? Then read the following segment.

Next: A more sophisticated bouncing animation >>