Home arrow DHTML arrow Page 2 - 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 - Applying more combination effects
(Page 2 of 4 )

As I clearly stated in the introduction of this article, the Scriptaculous DHTML module comes packaged with a decent number of predefined effects. Some of them were properly reviewed in the preceding article of the series. Nevertheless, there are many that still remain uncovered, so let me offer you a quick explanation of how they work.

I’m going to start this brief review by taking a look at the first group of combination effects, which are called “Shake,” “BlindDown” and “BlindUp” respectively.

With reference to using these brand new effects, a simple implementation for each one of them is shown below. I suggest you to examine the corresponding code samples. Here they are:

(Implementation of Shake 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 Shake 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.Shake('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 shaking now</div>
</body>
</html>

(Implementation of BlindDown 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 BlindDown 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.BlindDown('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 will blind down now</div>
</body>
</html>

(Implementation of BlindUp 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 BlindUp 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.BlindUp('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 will blind up now</div>
</body>
</html>

As you can see, the three combination effects shown above are indeed easy to follow, since all of them can be implemented by a similar approach. In the first example, a simple DIV element is animated by utilizing the “Effect.Shake” animation, while the second and third cases demonstrate the use of the neat “Effect.BlindUp” and “Effect.BlindDown” effects respectively.

Of course, if you want to see more clearly what these animations look like, simply copy and paste the source code that corresponds to all previous hands-on examples into your favorite text editor and watch them on your own browser. Indeed, this is the best way to appreciate the real potential of a particular animation.

All right, now that you have learned how to use the “Shake,” “BlindUp” and “BlindDown” combination effects that come bundled with Scriptaculous, it’s time to leap forward and continue exploring more DHTML animations.

With reference to this specific topic, in the next section I’ll be talking a close look at some new combination effects, called “SwitchOff, “SlideUp” and “SlideDown,” so if you want to learn how they work, please click on the link below and keep reading.


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