Advertisements
In this penultimate part of the series, I introduce you to using some extra methods provided by the GX library that come in useful for performing various operations. These include fading in and fading out, slides, and even manipulating the visibility of web page elements. All of these animation tasks can be accomplished very easily.
Creating engaging animations on your web pages does not always imply that you have to put your pockets (or your credit card) under strain buying expensive software like Flash or Swift 3D. Thanks to the generosity of many developers worldwide, you can pick up a JavaScript framework for free among the numerous ones available on the web, and start turning your divs, paragraphs and lists into dynamic elements.
In reality, at present there's such a great variety of animation frameworks available that choosing one that fits your needs without overkill can be a challenging task. Fortunately, making the right decision doesn't have to be a painful experience. This is especially true if you're a big fan of jQuery; you may want to try GX, a powerful plug-in that will let you implement all sorts of eye-catching effects on your (X)HTML documents without having to mess up a single portion of your clean markup.
Naturally, if you've been a loyal follower of this article series and have already read all of the tutorials previous to this one, you now have a strong background in how to use the GX library for creating different types of effects, ranging from altering the dimensions of an HTML element and varying its opacity, to moving it up and down across the browser.
While it's fair to stress that in most cases these effects were performed via the workhorse of GX, that is its handy "gx()" method, the library comes with a few additional, convenient methods that can be used for animations such as fade-ins and fade-outs, slides and even hiding elements entirely. Therefore, if you're interested in learning how to put these methods to work for you, in this penultimate part of the series I'll be taking a close look at them.
Let's start exploring the functionality of these fine animation methods.
As I just expressed in the introduction, the GX library is capable of performing smooth transitions in the opacity of web page elements through a complementary set of specific methods, not surprisingly called "fadeIn()" and "fadeout()." In consonance with the library's flat learning curve, working with these methods is a fairly straightforward process. The code fragment below demonstrates this in a nutshell. Look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript" src="gx.extras.js"></script>
<script type="text/javascript">
// use the fadeOut/fadeIn effects
$(document).ready(function(){
$('#container').click(function(){
$('#container').fadeOut(2000).fadeIn(2000)
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Using the fadeOut()/fadeIn() effects</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</div>
</body>
</html>
In this concrete example, the aforementioned "fadeIn()" and "fadeout()" methods have been chained to produce a simple effect where the opacity of the target div is first reduced to 0 (zero) and them restored to its initial value. Nothing stops you, though, from using the methods separately or even in the reverse order, especially if you need to make a specific element vanish gracefully from display.
In addition to the earlier code sample, here's a simple diagram that shows how the pertinent fade-in/fade-out sequence is performed on the target div:
I don't want to sound over-excited, but since using the previous methods should be a breeze even for an inexperienced designer, it's time to explore two more methods bundled with the GX library. Therefore, in the following section I'll be showing how to slide an HTML element easily via two new methods, called "slideIn()" and "slideOut()."
To learn more about this topic, click on the link below and keep reading.
Another interesting facet of the GX library worth looking at is its ability to slide HTML elements in and out, which can be achieved via an additional set of methods, called "slideIn()" and "slideOut()" respectively. In the GX library's jargon, the term "sliding" is used to implement an effect where the height of the target element is altered in some form, thus the sequential invocation of the previous methods would cause the element to be alternately expanded and contracted.
That's exactly what the following code snippet attempts to demonstrate. Check it out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript" src="gx.extras.js"></script>
<script type="text/javascript">
// use the slideOut/slideIn effects
$(document).ready(function(){
$('#container').click(function(){
$('#container').slideOut(1000).slideIn(1000)
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Using the slideOut()/slideIn() effects</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</div>
</body>
</html>
That was easy to code and read, wasn't it? As I just said, calling the "slideIn()" and "slideOut()" methods in a predefined sequence will make the selected element alternately reduce or enlarge its height. Similar to the fade-in/fade-out example shown in the previous segment, the sliding methods have been chained, but naturally it's possible to use them separately or in the sequence that best suits your needs.
A diagram should help you to understand more easily how the sliding-in/sliding-out process works, so below I included one for you. Here it is:
Well, assuming that you've now grasped the logic behind working with the "slideIn()" and "slideOut()" methods, I'd like to spend a few moments exploring another handy pair of complementary methods offered by GX. These permit you to hide and display an HTML element in a snap. Not surprisingly, these methods are called "hide()" and "show()," and in the last section of this tutorial I'll be showing you how to work with them at a basic level.
Now, jump ahead and read the next few lines.
Certainly, one the most common effects that can be seen today on many web pages is the programmatic manipulation of the visibility of several HTML elements. As one might expect, GX also comes with a couple of methods, called "hide()" and "show()," that makes this process simple.
To illustrate how to use these simple methods, here's another trivial example that alternates calling each one. 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the GX Animation Library</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="gx.js"></script>
<script type="text/javascript" src="gx.transitions.js"></script>
<script type="text/javascript" src="gx.extras.js"></script>
<script type="text/javascript">
// use the hide/show effects
$(document).ready(function(){
$('#container').click(function(){
$('#container').hide(1000, 'Elastic').show(1000, 'Elastic')
});
});
</script>
<style type="text/css">
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>
<div id="wrapper">
<div id="header">
<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>
<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>
<div id="content">
<h2>Using the hide()/show() effects</h2>
<div id="container">
<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>
</div>
<div id="footer">
<h2>Footer 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>
<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>
</div>
</body>
</html>
True to form, the above code fragment is self-explanatory. It simply hides and shows, in sequence, a target div. Again, it's valid to point out that the methods can be invoked individually, so keep this in mind when implementing this type of hide/show effect on your own web pages.
And with this last example, we've come to the end of this tutorial. As always, feel free to edit all of the code snippets shown previously, so you can arm yourself with a better grounding in using these fine methods that come with the GX framework.
Final thoughts
Over this penultimate chapter of the series, I introduced you to using some extra methods provided by the GX library. As you saw for yourself a moment ago, they come in useful for performing fade-ins/fade-outs, slides and even manipulating the visibility of web page elements.
Nevertheless, the list of these methods doesn't stop here. GX comes with a few more that can be used for scaling and moving HTML elements on screen. Thus, the final installment of the series will cover the use of these additional methods, concluding our overview of this powerful animation library.
