This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, February 11, 2008

Opacity change using Scriptaculous

Scriptaculous is a great framework to implement superb animated effects for your website. It's simple to use and in general final result is awesome.

This tutorial explains how to use Scriptaculous to implement a nice "change opacity" effect for a layer and its content.


Download this tutorial (include Scriptaculous 1.8.1)

Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the <head> tag of your page:

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

Step 2: HTML code
This is an example about how to use opacity change effect. You have a container layer with ID el1, a chechkbox and some content like the following:


<div id="el1">
<img src="pic-user/u1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Database: design Entity-Relationship model</span>
<span class="desc">Complete the document with functional analysis</span>
</div>


When you click on the checkbox, if the checkbox was "not checked" you call a function (changeOpacity()) to set the layer opacity to 30%. If the chechbox was "checked", the function set the layer opacity from 30% to 100%. You can add new similar layers using a progressive numeration for ID (el2, el3, el4...). In this case remember to change the parameter in input in changeOpacity() function for each layer (changeOpacity(2), changeOpacity(3), changeOpacity(4)...).

Step 3: JavaScript function changeOpacity
Now, add this simple function into the <head&gt tag of your page to enable change opacity effect:

<script type="text/javascript">
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>


It's all! Download this tutorial and try it!

Download this tutorial (include Scriptaculous 1.8.1)

blog comments powered by Disqus
aksn1p3r said...

This is just brilliant to implement to make it look like the Digg login bar opacity effect.

Alex said...

I'm so glad you took your ads off at the top left of your blog. Keep up the good work!

Legoes said...

Hei Antonio!

Great post!

Can you show me how to make a menu look like SF.net (sourceforge.net)?

Sorry for my bad english!

br said...

cool! super easy to use. thanks

vinkiel said...

new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}

should be

new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:1});
$opacityStatus.value= 0;
}

cheers :)

Ryan said...

Using the checkbox value to trigger the if..else conditionals is impractical, since a lot of developers use the value attribute to pass something to a script.

Here's my revised code and it works just as well:

function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.checked){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:1});
}
}

php said...

nice example.......and explanation.......

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News