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

Trackback URL for this post:

http://piotr.zalewa.info/trackback/52

Comments

wow time card (not verified) 1970, January 1 - 00:00

what's your name? bmx

custom essay (not verified) 1970, January 1 - 00:00

oh I didn't know we can do this… great! thanks! I'll try to do this on my blog,

best blu ray maker (not verified) 1970, January 1 - 00:00

which function is $$()?? i never read it in any of the books?

-Andy

Anonymous (not verified) 1970, January 1 - 00:00

You missed a file http://piotr.za­lewa.info/…c/ef­fects.js

you need to add that to the same directory as scriptaculous.js

Jay (not verified) 1970, January 1 - 00:00

When I call the scripts in your website (by pasting the links in your exemple), it's working. But when I call the scripts I've downloaded, it's not… well, what's wrong ?

Piotr 1970, January 1 - 00:00

@Anonymous and IE7

I may have to test it again, but to my knowledge it does work under IE7. It was used on http://bboyun­derwear.com .

Anonymous (not verified) 1970, January 1 - 00:00

great!but not working in IE7

Piotr 1970, January 1 - 00:00

Hi Ken
Good point - everything which needs to fade out needs to be within #page block.

Ken (not verified) 1970, January 1 - 00:00

You have a great piece of coding and it should be more widely used. The only confusing thing that I noticed and it took me a while to figure out…

You never say you must have a div that wraps around the whole content of your webpage… in your case

otherwise the script init will not work as it specifically looks for ‚page‘. As shown below.

// make the page appear on load $(‚page‘).hide(); new Effect.Appear(‚pa­ge‘);

Either make a new div named ‚page‘ or add your own and change the ID reference in the Init script.

Otherwise, good work!

Piotr 1970, January 1 - 00:00

@Ryan I don't know – Your website is not working…

Ryan (not verified) 1970, January 1 - 00:00

What am I doing wrong?

http:// www .ishowpro.com/Ex­hibitors/boot­h_test.aspx

>> edited by Piotr to remove 404 link from the page

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
I just have to ask ...
2 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.