Link triggered page transition with fade out

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>
  <!-- ... -->

Initiate linkToFade functions

Add following after the (X)HTML code given above:

<script type='text/javascript' language='javascript'>
    function () {
      // inititate the link to fade functions

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
new Effect.Appear('page');

// inititate the link to fade functions

That's it! Grab your linkToFade.js and share the news below:

Trackback URL for this post: