Using Combination Effects with the Scriptaculous DHTML Library - Going one step further into DHML animations
(Page 3 of 4 )
Now I'm going to show you more eye-catching animations that come integrated with the Scriptaculous framework so you can grasp quickly how to use them with your own web applications.
Take a look at the following examples, which illustrate the correct implementation of three new combination effects, named “SwitchOff,” “SlideUp” and “SlideDown” respectively. Here they are:
(Implementation of SwitchOff effect)
<!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=iso-8859-1" />
<title>Example of SwitchOff effect (combination of effects)</title>
<script language="javascript"
src="scriptaculous/js/prototype.js"></script>
<script language="javascript"
src="scriptaculous/js/scriptaculous.js"></script>
<script language="javascript">
// display effect
function displayEffect(){
new Effect.SwitchOff('container');
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 100px;
padding: 10px;
background: #cf9;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="container">This element will disappear now</div>
</body>
</html>
(Implementation of SlideUp effect)
<!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=iso-8859-1" />
<title>Example of SlideUp effect (combination of effects)</title>
<script language="javascript"
src="scriptaculous/js/prototype.js"></script>
<script language="javascript"
src="scriptaculous/js/scriptaculous.js"></script>
<script language="javascript">
// display effect
function displayEffect(){
new Effect.SlideUp('container');
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 100px;
padding: 10px;
background: #cf9;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="container">This element is sliding up now</div>
</body>
</html>
(Implementation of SlideDown effect)
<!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=iso-8859-1" />
<title>Example of SlideDown effect (combination of effects)</title>
<script language="javascript"
src="scriptaculous/js/prototype.js"></script>
<script language="javascript"
src="scriptaculous/js/scriptaculous.js"></script>
<script language="javascript">
// display effect
function displayEffect(){
Effect.SlideDown('container', {duration:3});
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 100px;
padding: 10px;
background: #cf9;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="container">This element is sliding down now</div>
</body>
</html>
As illustrated above, these three brand new DHTML animations can be useful in those cases where you need to make some web page elements disappear in a funny way. In all three hands-on examples, a sample DIV element will be removed from the corresponding web document, displaying different visual effects.
As I said before, try running all the examples on your own browser, so you can get a better idea of how they work.
So far, so good. At this point I assume that you already understand the logic that drives each one of the DHTML effects that were shown previously, which are, by the way, quite easy to include into any web page.
However, this educational journey hasn’t finished yet, because the Scriptaculous library has been provided with some additional predefined animations that I’d like to show you. Therefore, keeping this in mind, in the section to come – the last one of this tutorial – I’m going to cover in detail the aforementioned animations, in this way completing this brief review of the robust Scriptaculous’ DHTML module.
To learn how these brand new visual effects will be coded, go ahead and read the last section of this article.
Next: Examining some additional DHTML effects >>
More DHTML Articles
More By Alejandro Gervasio
