JAVASCRIPT

Moving Elements Vertically and Horizontally with the GX JavaScript Animation Framework

In this fifth part of a series on the GX animation library, I develop a couple of basic examples that demonstrate how to move a div either vertically or horizontally. You'll see that it's a simple process of manipulating the div’s “top” and “left” properties.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

January 27, 2010

TABLE OF CONTENTS:

As usual, before I begin discussing how to utilize the “gx()” method of GX for manipulating the “top” and “left” coordinates of a selected HTML element, first I’d like to review the examples created in the previous part of the series. They demonstrated how to add a bouncing effect to some parallel animations.

Having clarified that point, here’s the first of the aforementioned examples. It creates a bouncing animation when changing the width and height of a sample div. Check it out:

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

As seen above, creating a bouncing animation that alters at the same time the width and height of a div is a simple task limited to passing a value of “Bounce” to the easing parameter taken by the pertinent “gx()” method. But, is this all GX can do to make an element bounce up and down on screen?

Well, not really. If you look at the example below, you’ll realize that this time the animation also modifies the background color of the div in a single step:

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

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

Here you have it. Armed with all the background you’ve acquired so far, you’ll be able to create your own parallel animations with GX -- without having to leave at any point the comfortable environment of jQuery. What else can you ask for?

Okay, I have to admit I got caught for the moment. In reality, the GX library will let you do much more than simply change the dimensions and background color of a div simultaneously. Moreover, any decent animation framework should have the ability to move an HTML element across the entire screen. Fortunately, GX isn’t an exception.

True to form, GX has some specific methods that permit you to move elements on the browser by directly manipulating their X and Y coordinates, but for the moment I’ll discuss how to produce a similar result using the classic “gx()” method.

In the next section I’ll be explaining how to displace a div to the right corner of the browser by changing only its “left” property. Therefore, to learn the full details of this process, click on the link below and keep reading.

Next: Moving elements across the screen >>