JAVASCRIPT

Manipulating Background Colors with the GX JavaScript Animation Framework

In this second installment of a series, I take a deeper look at a few more features provided by the GX library. Specifically, I show how to use them for performing parallel animations that include changing the width, height and background color of a sample div.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

January 21, 2010

TABLE OF CONTENTS:

In the previous section, I coded an example that illustrated how to manipulate at the same time the width and the background color of a simple div. Now, let me show you an example that will perform the same parallel animation, but altering the height of the div. Here’s how this brand new example looks:

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

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

As you can see, a small modification in a parameter passed to the handy “gx()” method produces an animation that is drastically different. In this case, when the animation is triggered after the web page has finished loading, the selected div smoothly changes its background color along with its height. To understand more accurately how this process works, pay attention to the following figure:

There you have it. Once more, this shows how easy it is to perform more complex animations with the GX library. As usual, I suggest that you edit all the code samples developed in this article, so you can start implementing your own animation effects on web pages. The experience will be truly educational, believe me.

Final thoughts

That’s all for now. In this second installment of the series, I took a deeper look at a few more features provided by the GX library and showed how to use them for performing parallel animations that included changing the width, height and background color of a sample div. In all the examples, the “gx()” method did the hard work, so I suggest you have fun passing other values to this method and see what happens in each case.

In addition, you may have noticed that all of the animations shown so far used a “Linear” value for the easing argument. Well, while this is handy, the GX library permits you to create bouncing and elastic effects by tweaking this argument.

That’s exactly the topic that I’ll be discussing in the next tutorial. Thus, now that you know what to expect from that part of the series, you can’t miss it!

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.