Piotr Zalewa

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.

Working example

Add Javascript libraries

1. Download the linkToFade.js file
2. 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: