Fade-in effect on page load

Question

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;
}

Notice where the items have negative `top` values. They fade in the items while animating the `top` property back to 0, achieving the drop effect. — SeinopSys, May 19 '14 at 16:32
So the values are negative while on 0 opacity but the reset when their classes have the ".no-js" prefix what does this do? (no javascript)? — Pain, May 19 '14 at 16:35
See, they do the animation of the elements using JavaScript, and if the visitor has disabled it in their browser, the page would be useless, because everything is invisible. They probably have a `no-js` class on the `` which is then removed by their script which does the animation. — SeinopSys, May 19 '14 at 16:41
Thanks a lot im going to take a look at their script and specific body elements and then of curse try it out :D — Pain, May 19 '14 at 16:44

score 1 · Accepted Answer · answered May 19 '14 at 16:45

1

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.

answered May 19 '14 at 16:45

David Randall

770
3
9

Change that "negative margin" to `top` and you have my upvote. – SeinopSys May 19 '14 at 16:47
thanks guys, I didnt notice that btw! ow and now that you mentioned "modernizr" their script is – Pain May 19 '14 at 16:55
Also when you run the page localy the content is not view-able but if you upload it on a server it works like a charm XD I felt like posting this too :D – Pain May 19 '14 at 18:22

score 0 · Answer 2 · answered Aug 06 '16 at 09:59

Here Is simplest solution for your question..

<!DOCTYPE HTML>
<HTML>
<head>
  <title> Fade In On Page Load </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("#test").fadeIn(5000)
})
</script>
</head>

<body>
  <div id="test>
    <p>This Is A Test</p>
  </div>
</body>
</html>

score 0 · Answer 3 · answered Aug 28 '22 at 08:08

.content
{
    width: 20rem;
    /* border: 2px solid red; */
    font-size: 4rem;
    margin-left: 2rem;
    margin-top: 3rem;
    height: 22rem;
    color: #743e5e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: .5s all ease-in-out;
    align-items: center;
}
body:hover .content
{
    opacity: 100;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GemsAndGenius</title>
</head>
<body>
        <div class="content hidden">
            Let's Get The Gem You Craved Of !
            <div class="button">
                <button id="buynow">Buy Now</button>
            </div>
            </div>
</body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 01 '22 at 05:08

Fade-in effect on page load

3 Answers3