Using Combination Effects with the Scriptaculous DHTML Library - Examining some additional DHTML effects
(Page 4 of 4 )
In consonance with the concepts that I deployed in the previous section, I’d like to end this tutorial by showing you a few additional DHTML effects that come included with the Scriptaculous framework. This will permit you to further expand your background in the numerous and useful features offered by this library.
Please take a look at the following hands-on examples, which demonstrate in a friendly fashion how to use five new visual effects. More specifically, the three first cases illustrate the implementation of the “Pulsate,” “Squish” and “Fold” animations, while the last two show how to utilize the “Grow” and “Shrink” effects.
Here are the pertinent code samples:
(Implementation of Pulsate 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 Pulsate 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.Pulsate('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 pulsating now</div>
</body>
</html>
(Implementation of Squish 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 Squish 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.Squish('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 squishing now</div>
</body>
</html>
(Implementation of Fold 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 Fold 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.Fold('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 folding now</div>
</body>
</html>
(Implementation of Grow 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 Grow 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.Grow('container');
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
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 growing now</div>
</body>
</html>
(Implementation of Shrink 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 Shrink 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.Shrink('container);
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
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 shrinking now</div>
</body>
</html>
As you might have guessed, implementing all these brand new effects with Scriptaculous is very similar to building the examples shown in the previous sections of the article. Of course, the main difference with these effects rests on the type of DHTML animation that each one of them displays on the browser, but the rest of its implementation is nearly identical.
My final suggestion with reference to using all the visual effects provided by the Scriptaculous library is that you thoroughly test each of them, either by coding your own JavaScript routines, or – as shown in this series – by using the Prototype framework.
Final thoughts
Sadly, we’ve come to the end of this series. In these three articles I provided you with a decent guide on how to use the most important DHTML effects that come bundled with the Scriptaculous framework, definitely a piece of software that you should take into account, particularly if you need to develop DHTML applications quickly.
See you in the next web development tutorial!
| 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. |
