The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Is it okay to transition the entire page on full page load?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #39332

    I found this site the other day. It has this neat effect where the entire body has “opacity: 0;” and then when jQuery says the dom is fully loaded a new class is applied to the body and the opacity is set to 1. Bundled with “transition: opacity .5s linear;” this give a really cool effect.

    However this has many implication. Say the user doesn’t have javascript the site is invisible, or if the page has a long load time of say 5 sec the entire page would be invisible for 5 sec. And when you go between pages the animation feels a little out of place.

    I think this is a neat effect on the first page load, but is it something you would consider using on a production site?


    Personally I like the effect and use it, though I implement it differently (with “display:none” applied to the body in CSS and a jQuery fadeIn). I just posted a question about what to do about the “js disabled user” yesterday and got a great response from TheDoc. The thread’s here, if you’d like to read it.


    Just went and took another peak at the site you link to with JS turned off. The pages load normally, so the designer is probably serving you a “straight” page if you’ve disabled JS, and an “enhanced” page if you’ve got it enabled.

    FWIW the page load wait time doesn’t bother me.


    Hey guys, I’m the owner/designer of the site mentioned above. Just want to chime in and let you know that I didn’t just add that fade in for effect – I’m using a web font from TypeKit for all text, and I wanted to avoid the Flash Of Unstyled Content while the font files are downloading. As you discovered, the font and effect only apply to visitors with JavaScript enabled. Hope that helps! — Brian


    That’s a nice way to avoid that FOUC (“flash of unstyled content”). The reason I opted for using display:none in the CSS of my site was for the same reason: when I had jQuery hide the content, you got a brief glimpse of it *before* it got hid, then it got hid, then it faded in.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.