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:

Before I start showing you how to use the GX library to animate the width, height and background color of a sample div, all at the same time, let's take a quick look at the group of examples coded in the previous article. Here’s the first one, which animates a div by modifying its initial width. Take a look at 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 of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'width': 600}, 500, '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 width</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 I explained in the introduction, most of the animations that can be implemented with the GX library are performed through its core “gx()” method; the example above shows this in a nutshell. In this case, the method is used to animate the width of a div identified as “container,” and the result of this process can be seen in the following image:

Naturally, GX permits you to do many other useful things, such as animate an HTML element by altering its height. The example below recreates this specific case:

<!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 of the targeted div element

$(document).ready(function(){

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

$('#container').gx({'height': 300}, 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</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>

That was easy to code and read, wasn’t it? However, if you still have any doubts regarding the output generated by the previous code fragment, the following screen shot should clear them up. Here it is:

If you've grasped how the earlier example does its thing, pay attention to this next one. It demonstrates how to animate the same sample div by modifying its width and height properties simultaneously:

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

$(document).ready(function(){

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

$('#container').gx({'width': 600, 'height': 300}, 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 both its width and height</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, thanks to the flexibility offered by the “gx()” method, it’s possible to manipulate multiple properties of an HTML element at the same time with ease. In addition to the corresponding code sample, the below image shows the initial and final states of the animation coded in the previous example:

Well, at this point you’re pretty familiar with using the GX library to implement basic animations on a web page. As you saw for yourself, if you wish to change either the initial value assigned to a single property of an HTML element or want to execute a more complex animation that involves modifying multiple properties, the process is in all the cases is simple.

GX makes it possible to animate an HTML element in all sorts of creative ways, not just by altering its dimensions on screen. To prove the veracity of my claim, in the section to come I’ll be tweaking the above example to create an animation that will change the background color of the selected div.

To see how this will be done, please click on the link below and keep reading.

Next: Modifying the background color of a sample div >>