Home arrow DHTML arrow Page 3 - 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 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.


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