My client wanted to make a transition between pages. I thought it would be difficult to do, but with help of Scriptaculous effects and Prototype's $$() function it turned out to be pretty simple.
The method I used is easy to use, unobtrusive and needs only one element which usually is already in the code – main div surrounding all page content.
- Download the linkToFade.js file
- Add Prototype, Scriptaculous and linkToFade files
Write the (X)HTML
It's normal HTML one would use for the page. Just the link needs to have a class named „fade“
<div id='page'> <!-- ... --> <a href='standard_link' class='fade'>Link</a> <!-- ... --> </div>
Initiate linkToFade functions
Add following after the (X)HTML code given above:
We've got the linkToFade functionality. To make the page also appear on load one has to add this just before initiating the link to fade:
// make the page appear on load $('page').hide(); new Effect.Appear('page'); // inititate the link to fade functions initiateLinkToFade();
That's it! Grab your linkToFade.js and share the news below: