Smoothly Fade In Entire Web Page With MooTools

Question

I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.

I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).

One of the StackOverflow experts suggested this MooTools snippet as a solution:

window.addEvent('load', function() {
  $$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});

PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.

I'd appreciate a bit of advice from a knowledgeable person.

Answer 1

The answer to your question is to do the following.

Remove the CSS opacity:0; in the stylesheet and use this code adjusted from yours

I increased from 300 to 3000 which in seconds is from .3seconds to 3seconds .

chained:

window.addEvent('load', function () {

    $$('body').fade('hide').set('morph', {
        duration: 3000
    }).morph({
        'opacity': '1'
    });


});

expanded:

window.addEvent('load', function () {

    var el = $$('body');

    el.fade('hide'); // hide body tag

    el.set('morph', {duration: 3000});

    $$('body').morph({'opacity': '1'});


});

Notice:

I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.