Reviewing More DHTML Effects from the Scriptaculous DHTML Library - Creating parallel DHTML effects with Scriptaculous
(Page 3 of 4 )
As I stated in the section that you just went through, the Scriptaculous library allows developers to combine two or more core effects in only one statement, in this way implementing a “parallel” effect. As you can see, this is a powerful concept, since it’s possible to achieve high-impact results by coding a single line of JavaScript.
To illustrate how a parallel effect can be built, please examine the signature of the following examples, where two core effects are combined to create a parallel effect. The corresponding code samples look like this:
<!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 Parallel 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.Parallel(
[new Effect.MoveBy('container',0,300,{sync: true }),new Effect.Opacity('container',{ sync: true, to: 0.0, from: 1.0 } ) ],{ duration: 0.5});
}
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 show two parallel effects</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 Paralell 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.Parallel(
[new Effect.MoveBy('container',0,300,{sync:true}),new Effect.Scale('container',150)]);
}
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 show two parallel effects</div>
</body>
</html>
Wasn’t that good? I bet it was. As shown above, the brand new “Effect.Parallel” class lets you easily combine two or more basic effects into only one JavaScript statement, which means that it’s feasible to obtain all sort of variations. Here the sky is the limit, believe me. And if all this isn’t enough for you, try testing the hands-on examples with your browser. This will give you an even better idea of what you can do with the “Effect”.Parallel” class.
So far, so good. Now you’ve learned how to create a parallel effect with the Scriptaculous library. However, this package still has more to offer in terms of DHTML-based animation. It supports a number of combined effects, which have been pre-built as part of the software.
The obvious advantage of using these built-in combined effects is that you don’t have to waste your time coding your own DHTML animations, so this feature can be a real time saver.
Assuming that you’re interested in learning how to create these combined effects, go ahead and read the next section. I’ll be there, waiting for you.
Next: Creating combination DHTML effects >>
More DHTML Articles
More By Alejandro Gervasio
