Reviewing More DHTML Effects from the Scriptaculous DHTML Library - Creating combination DHTML effects
(Page 4 of 4 )
As I mentioned before, the Scriptaculous animation framework comes equipped with a group of predefined effects, which are in fact a combination of the four basic effects. This feature is particularly useful if you’re planning to implement only primitive effects on your web site. If you’re looking for more advanced animations, the “Effect.Parallel” class that was explained in the prior section should fit your requirements perfectly.
Now, after introducing the concept of “combined” effects, I’d like you to have a look at the following examples. They show how to implement four different pre-built animations, where the first two correspond to the “Appear” and “Fade” effects, and the last ones use the “Puff” and “DropoOut” animations respectively.
The aforementioned examples are as follows:
<!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 Appear 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.Appear('container',{ duration: 3.0 });
}
function initializeElement(){
Event.observe($('displaylink'),'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>
<a href="#" id="displaylink">Click to show the element</a>
<div id="container" style="display:none;">This element is appearing now</div>
</body>
</html>
<!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 Fade 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.Fade('container',{ transition: Effect.Transitions.wobble});
}
function initializeElement(){
Event.observe($('displaylink'),'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>
<a href="#" id="displaylink">Click to remove the element</a>
<div id="container">This element is fading out now</div>
</body>
</html>
<!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 Puff 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.Puff('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 fading out now</div>
</body>
</html>
<!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 Dropout 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.DropOut('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 dropping out now</div>
</body>
</html>
As you can see, creating combination effects with the Scriptaculous library is actually a straightforward task, since this process is nearly identical to building core animations. Of course, you’ll appreciate the results of these DHTML animations much better if you test all of them in your browser. I’m sure you won’t be disappointed at all!
Final thoughts
That’s all for the moment. In this second part of the series, you learned in a friendly fashion how to create parallel and combination effects with the Scriptaculous animation framework. Nonetheless, this excellent JavaScript library has been provided with many more pre-built effects for spicing up your DHTML applications. These will be covered in the final article. I hope to see you there!
| 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. |
