Scriptaculous Fade effect is one of my favorite effects of this framework and in this post I want to use it to implement a Digg-line sign-in bar.
My friend Ivan asked to me how to implement the same Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar. This is very simple using Scriptaculous and toggle effect with only few lines of HTML code.
Download this tutorialStep 1: Download Scriptaculous Framework
Before to start, you have to download scriptaculous framework here and add 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>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
Step 2: HTML code
HTML code is very simple
<div id="login" style="display:none;">
Email <input name="email" type="text" /> Password <input name="password" type="text" /></div>
<a href="#" onclick="Effect.toggle('login','appear'); return false;">Login</a>
Email <input name="email" type="text" /> Password <input name="password" type="text" /></div>
<a href="#" onclick="Effect.toggle('login','appear'); return false;">Login</a>
Effect.toggle() function takes as input two parameters: layer ID (in this case "login") and type of effect (in this case "appear" to simulate fade-in effect).
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Instead of
a href="#" onclick="Effect....
use
a href="/login" onclick="Effect...
and make a dedicated site to login. So clients without JavaScript can use your site too.
Really useful. Thank u