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:

As I said before, I’d like to finish this tutorial by showing you how to create a bouncing animation that will modify three different properties of the same sample div that you saw in the previous section. In this particular case, the set of properties of the element that will be changed will be its width, height and background color respectively, and the code required to perform this task is as short as this:

<!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, height and background color of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'width': 600, 'height': 300, 'background-color': '#ff8040'}, 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, height and background color 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>

Mission accomplished. At this stage, you learned how to take advantage of the functionality provided by the “gx()” method, in this case for creating a bouncing animation that modifies three distinct properties of the same div. The method is actually very flexible, so I suggest that you set up your own examples and call it with different arguments, whether for building a classic “Linear” animation or for implementing the bouncing one discussed a moment ago. In either case, you’ll have a great time, trust me!

Final thoughts

That’s all for the moment. In this fourth installment of the series I provided you with some friendly examples that showed how to use the GX library for creating an appealing bouncing effect when performing parallel animations on a target div. As you saw for yourself, the process was extremely simple; I believe that you won't have any major trouble if you need to implement this kind of effect on your own web pages.

You may have noticed that all of the examples shown so far animated only the width, height and background color of the target div, which can be useful in certain cases. But what happens if you wish to move the div across the screen by modifying its “top” and “left” coordinates?

Well, fortunately GX will let you accomplish this in a painless way. In the upcoming tutorial I’ll be taking a closer look at this process, so you can grasp its driving logic in a snap. Here’s a piece of advice: don’t miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.