fadeindown text animation using css or jQuery

Question

I have a header on the homepage of my website which contains text and an anchor link.

I have seen on other websites text and images animated when the page loads and would like to know how this is possible?

I would like to animate the text headline and subheadlines to fadeindown on page load how is this possible?

HTML

<div class="homepage">
<div class="headline">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline"><h1><span>To the home of</span></h1></div><div     class="subheadline"><h1><span>Multimedia Journalist</span></h1></div>
<div class="subheadline"><h1><span>Dan Morris</span></h1></div>
<a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a>
</div>

CSS

.homepage {
height: 650px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
background-image: url(../images/25H.jpg);
background-attachment: fixed;
}

.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
}

.subheadline {
height: auto;
width: 80%;
margin-left:78px;
text-align:left;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
}

h1 {
font-size: 40px;
font-weight: 100;
text-transform: uppercase;
color:#FFF;
text-align:left;
}

h1 span {
display: inline-block;
margin-bottom: 5px;
padding: 6px 15px;
background: rgb(0, 200, 200);
background: rgba(52, 119, 206, 0.7);
}

Thanks in advance.

possible duplicate of [Using CSS for fade-in effect on page load](http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load) — Stickers, May 24 '15 at 18:00

score 0 · Answer 1 · answered May 24 '15 at 17:48

If i understood your question correctly this should be what your looking for.

Working example: https://jsfiddle.net/usphvwjp/

Basically adding a wrapper div around your content and setting it's opacity to 0 then waiting 1 sec before fading it in on page load.

$(function(){
    setTimeout(function(){
        $(".content").animate({ opacity: 1},1500);
    }, 1000);

});

fadeindown text animation using css or jQuery

1 Answers1