Home arrow DHTML arrow Page 4 - Reviewing More DHTML Effects from the Scriptaculous DHTML Library
DHTML

Reviewing More DHTML Effects from the Scriptaculous DHTML Library


If you’re looking for a straightforward guide on how to use the DHTML effects that come with the Scriptaculous framework, then look no further. Welcome to the second installment of the series that began with “A Close Look at Scriptaculous DHTML Library." Comprised of three parts, this series shows you how to create core and combined visual effects with this powerful JavaScript package, and how to use them easily with your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
April 11, 2007
TABLE OF CONTENTS:
  1. · Reviewing More DHTML Effects from the Scriptaculous DHTML Library
  2. · Working with the Highlight effect
  3. · Creating parallel DHTML effects with Scriptaculous
  4. · Creating combination DHTML effects

print this article
SEARCH DEVARTICLES

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.

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