- This topic is empty.
August 11, 2012 at 10:41 am #39332AndHeibergParticipant
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.
I think this is a neat effect on the first page load, but is it something you would consider using on a production site?August 11, 2012 at 12:04 pm #107736
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.August 11, 2012 at 12:09 pm #107737
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.August 11, 2012 at 3:20 pm #107740briandrumMember
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.
- The forum ‘CSS’ is closed to new topics and replies.