Home arrow DHTML arrow Page 4 - Using Combination Effects with the Scriptaculous DHTML Library
DHTML

Using Combination Effects with the Scriptaculous DHTML Library


The Scriptaculous animation framework has become extremely popular with web developers. Welcome to the final installment of the series “A close look at Scriptaculous DHTML library.” Made up of three instructive tutorials, this series covers the implementation of the most important animation effects that come packaged with this library, and provides you with pointers for including these effects quickly into your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
April 18, 2007
TABLE OF CONTENTS:
  1. · Using Combination Effects with the Scriptaculous DHTML Library
  2. · Applying more combination effects
  3. · Going one step further into DHML animations
  4. · Examining some additional DHTML effects

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials