Simple Animated Login Form using Scriptaculous

In this post, I will present how you can make a beautiful login form using animated effect of Scriptaculous . But before that, why not have a look at the meaning of Scriptaculous?
What is Prototype and what is Scriptaculous?

We can’t talk about

Scriptaculous without talking about Prototype.
Prototype is the more fundamental of the two libraries. Prototype provides a set of language extensions for JavaScript, for the browser environment, and for the XMLHttpRequest object. Scriptaculous and other libraries, such as Rico build on Prototype’s foundations to create widgets and other end-user functionalities.
JavaScript provides a mechanism known as prototype-based inheritance. In fact, several scripting languages provide features for extending the base objects of the language. Ruby does it, and many of the extensions provided by Prototype are getting out from Ruby. Once could describe Prototype’s goal as making JavaScript feel more like Ruby.
Briefly Prototype provides an extremely solid foundation for developing complex, well structured code, but on its own does little beyond that. Scriptaculous is a library that makes use of Prototype to deliver a rich set of high-level functionality that the developer can put to work directly in creating polished interactive user interfaces. When we use Prototype with Scriptaculous, it transforms the way in which we approach the web user interface, by making features such as animation and dragging and dropping as simple as a few lines of code. Like Prototype, Scriptaculous covers several distinct areas such as: Visual effects, Drag and drop, Utilities and testing frameworks, and components.
In this animated effect example; we will simply need to follow the 2 following steps:

Step 1: Use Scriptaculous Framework
Before to start, you should download Scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the <head> tag of your HTML code:

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

Step 2: HTML code to add

<div class="logincontent">
<a href="#"
onclick="Effect.toggle('login','appear'); return false;">Enter
here</a>

</div>
<div id="login" style="display: none;">
Login
<input name="" type="text" />
Password
<input name="" type="password" />
<input type="submit" class="btn" value="Submit"/>
</div>

As you have noticed, I have used Effect.toggle function.
Effect.toggle allows for easily toggling elements with an animation.
Syntax :

Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

element can be either a string containing the id of the element, or a JavaScript DOM element object.
The options parameter is used to give any additional customization parameters to the effect. There are general and effect-specific options.
Here is an example of Effect.toggle use:

Effect.toggle('id_of_element', 'appear');
Effect.toggle('id_of_element', 'slide', { delay: 0.9 });
Effect.toggle('id_of_element', 'blind', { duration: 1.0 });

View Demo

Reference: Prototype and Scriptaculous in Action