View Full Version : How to make a page fade out, then fade in, with different text

07-18-2010, 03:24 AM
Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?


any help would be appreciated!

Thanks, Cookies, whatever this forum gives out, you may receive!

Old Pedant
07-18-2010, 05:06 AM
Why "a new javascript file is loaded"??? Why does it need to change?

There are lots of ways to do this. If you really were just working with a white background and black text, you could simply fade the color of the text from black to white, change the text, then fade back to black.

But the more common way is to use an overlay that starts out transparent (or 99% so) and slowly becomes more an more opaque. You change the text, and then fade the layer back to transparent. The advantage here is that the layer can be any color and can cover up anything, including images, forms, etc.

Here's an example of that from a couple of months ago, sitting in an <iframe> in the middle of a page (but of course could just as easily be the entire page). It's covering up an image and a caption, so of course it could as easily be covering up all text. Or many images and text. Or or or.


The fader code is in http://www.artsofsnohomish.org/may10fader.html (which works all by itself, but doesn't look right full screen as it was designed to fit in that <iframe>).

08-09-2010, 07:23 PM
Yes, thanks for that, but i'm planning on using it for my Navagation links.
Old Penate: You misunderstood my post, I want to have several pages, and by using the onUnload and onLoad, Having a fade in/out script, or somthing like that. where i had seen it before was a flash site.

Old Pedant
08-09-2010, 08:05 PM
<shrug>Same principle.

You can't really do it via onunload, because you can't delay the unload while the fadeout takes place. Instead, you have all your nav links call JS that does the fadeout-and-then-leave. The fadein, though, is easy enough via onload.