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.
Add Javascript libraries
- Download the linkToFade.js file
- Add Prototype, Scriptaculous and linkToFade files
<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="linkToFade.js"></script>
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:
<script type='text/javascript' language='javascript'>
Event.observe(window,'load',
function () {
// inititate the link to fade functions
initiateLinkToFade();
}
);
</script>
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:









Comments
@Ryan I don't know – Your website is not working…
What am I doing wrong?
http://www.ishowpro.com/…th_test.aspx
Post new comment