Question

我的网站主页上有一个标题，其中包含文字和锚链接。

我在其他网站上看到当页面加载时动画的文字和图像，并想知道这是如何实现的？

我想在页面加载时将文本标题和子标题设置为fadeindown，这怎么可能？

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

提前致谢。

Answer 1

如果我理解你的问题，这应该是你想要的。

工作示例：https://jsfiddle.net/usphvwjp/

基本上在你的内容周围添加一个包装div并将其不透明度设置为0然后等待1秒，然后在页面加载时淡入它。

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

});

使用css或jQuery的fadeindown文本动画

1 个答案: