How Do You Make An Html Page Fade Out While Another Fades In?

October 26, 2023 Post a Comment

I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this without flash

Solution 1:

Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.

I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).

Process-wise, you could have 3 layers (top to bottom)

screen (initially invisible)
page (one)
container (initially empty)

when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.

EDIT on a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...

Solution 2:

Page Transitions are supported natively with IE, using the META tag. See the Microsoft page about Filters and Transitions for more

For a browser agnostic approach (using Javascript), see this Stack Overflow question

Solution 3:

This should work, without relying on Ajax (jQuery) :

$(function(){

    /*
    Add this code to every page.

    We start by hiding the body, and then fading it in.
    */
    $('body').hide().fadeIn('fast');

    /*
    Now we deal with all 'a' tags...
    */
    $('a').click(function(){
        /*
        Get the url from this anchors href
        */var link = $(this).attr('href');
        /*
        Fade out the whole page
        */
        $('body').fadeOut('fast', function(){
            /*
            When that's done (on the 'callback') send the browser to the link.
            */window.location.href = link;
        });
        returnfalse;
    });

});

Worth noting however is that if you're loading js at the bottom of the page (as we're often told to do), on a slow page load the page might be visible, then invisible, and then fade in again... Which would look very strange.

A solution would be to just hide the body in CSS, but you might, possibly, have visitors with JS turned off but CSS turned on, then they'll just have a blank page. Alternatively you could use a tiny amount of js at the top of the page (not relying on jQuery) to hide the body.

Lastly, however, why? I think if I visited your site these effects would begin to seriously annoy me pretty quickly. Why not just take the user to the page they asked for?

Solution 4:

Won't work in IE, but WebKit and FireFox are both on the boat with CSS transitions, and they run a lot more smoothly than any JavaScript.

http://www.w3.org/TR/css3-transitions/

Solution 5:

This might be a little late, but to Fade a page In when it loads, and then fade out On-click I'd suggest using jQuery. I wrote this quick little script that will do the trick that your after. Have a look at it, and I will explain below.

The CSS

body { display:none; }

The JS

$(document).ready(function() 
{
        $( 'body' ).fadeIn("slow", 0.0);
        $( 'body' ).fadeIn("slow", 0.1);
        $( 'body' ).fadeIn("slow", 0.2);
        $( 'body' ).fadeIn("slow", 0.3);
        $( 'body' ).fadeIn("slow", 0.4);
        $( 'body' ).fadeIn("slow", 0.5);
        $( 'body' ).fadeIn("slow", 0.6);
        $( 'body' ).fadeIn("slow", 0.7);
        $( 'body' ).fadeIn("slow", 0.8);
        $( 'body' ).fadeIn("slow", 0.9);
        $( 'body' ).fadeIn("slow", 1.0);
                $('a').click(function(){
                $('body').fadeOut();
                 setTimeout("nav('"+this.href+"')",1000);
               returnfalse;
       });
    });
functionnav(href){
location.href=href;
};

The CSS holds back the display of the body, which allows the JS to start the fade effect on-load of the page. The body fadeIn is set at intervals to allow a smoother fadeIn effect, giving the site time to load. I've set the fadeOut effect to trigger when any anchor link is clicked (you could change it whatever you wish to act as the fade out trigger). When the page fades out, it will most likly fade to a 'White' screen. To avoid this, set your HTML background color to any HEX to match the sites color.

That script right there is probably the best solution and quickest to impliment on any site. It's been tested on IE7-8, FF 3+ and Opera 9-10 and works like a charm. Enjoy!

Html5 Log