CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pain
Pain

Reputation: 185

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

Upvotes: 0

Views: 292

Answers (3)

Ahmed Khan
Ahmed Khan

Reputation: 1

.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>

Upvotes: 0

Nagesh87
Nagesh87

Reputation: 9

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>

Upvotes: 0

David Randall
David Randall

Reputation: 770

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.

Upvotes: 1

Related Questions