21CmOfPain 21CmOfPain - 4 months ago 9
HTML Question

Fade-in effect on page load

As already mentioned in the previous question (Using CSS for fade-in effect on page load)
the user asked how to do the fade in effect of http://dotmailapp.com/.

I found the question really useful but I have something to add. If you visit the site now you will see a fade-in but at the same time the objects to something like a drop, I checked their CSS and what I found is written below in the code box but I dont know how to apply this on my site.

So do I need their specific JS file? (I don't understand what the

/* **** no-js **** */ ...
is doing.)

/* **** for startanimation awesomeness **** */
.logo {
position: relative;
top: -50px;
opacity: 0;
}
h1 {
opacity: 0;
position: relative;
top: -30px;
}
header .subline {
opacity: 0;
position: relative;
top: -30px;
}
.mailchimp {
opacity: 0;
position: relative;
top: -30px;
}
.abovethefold .col {
opacity: 0;
}
.browser {
opacity: 0;
position: relative;
top: -50px;
}
.belowthefold {
opacity: 0;
}

/* **** no-js **** */
.no-js .logo {
position: relative;
top: 0px;
opacity: 1;
}
.no-js h1 {
opacity: 1;
position: relative;
top: 0px;
}
.no-js header .subline {
opacity: 1;
position: relative;
top: 0px;
}
.no-js .mailchimp {
opacity: 1;
position: relative;
top: -30px;
}
.no-js .abovethefold .col {
opacity: 0;
}
.no-js .browser {
opacity: 1;
position: relative;
top: 0px;
}
.no-js .belowthefold {
opacity: 1;
}

Answer

If you have a dig around the code of their site you'll notice a they are using Modernizr for browser feature detection. What that does is put load of classes on the html based on what that browser is capable of.

In the HTML they have the following:

<html class="no-js" lang="en">

When JS is enabled, this class is stripped out and replaced with js and they run some script to animate the elements from a negative top value to 0. When JS is not enabled, the class of no-js is left alone and is used as a CSS hook for the second block of code you posted - essentially resetting the elements back to 0 from the negative top value in the first code block.