延迟后如何淡入元素
How fade in element after delay
见下面的代码。我有一个带有渐变叠加层和一些文本的主图。我有它,所以当网站打开时,这一切都会消失。我只想 image/gradient 首先淡入,一旦完全淡入,然后文本淡入或滑入。实现此目的的最佳方法是什么?对褪色文本的简单延迟?谢谢
HTML
<section id="hero">
<div id="hero-gradient">
<div class="container">
<h1 id="hero-title">ASCO AUSTRALIA</h1>
<p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
<div id="button-container">
<a href="#learn-more-anchor"><div id="learn-more-button" class="smoothScroll">LEARN MORE</div></a>
<a href="#learn-more-anchor"><div id="find-us-button" class="smoothScroll">FIND US</div></a>
</div>
<a class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a>
</div>
</div>
</section>
CSS
#hero {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background-image: url(../images/hero.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation: fadein 2s;
z-index: 0;
}
#hero-gradient {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background: linear-gradient(-45deg, #324f8f, #1a7ba7);
opacity: 0.90;
z-index: 1;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#hero .container {
padding-top: 300px;
}
#hero-body {
max-width: 1100px;
margin: 0 auto;
color: #fff;
text-align: center;
font-weight: 200;
}
#button-container {
width: 1440px;
margin: 70px auto;
text-align: center;
max-width: 90%;
}
#learn-more-button {
margin-right: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border: 1px solid #fff;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
display: inline-block;
}
#learn-more-button:hover {
cursor: pointer;
width: 218px;
}
#find-us-button {
margin-left: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
display: inline-block;
}
#find-us-button:hover {
cursor: pointer;
width: 218px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
$("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
});
正如我在评论中所说,您不必使用多个 $(document).ready()
,一个就足够了。在这种情况下,同样适用于 $(window).scroll
。关于这个问题,我认为一个解决方案是使用 display: none;
隐藏 .container
元素,并使用 setTimeout()
方法在 x
秒后使用 [=19 显示它=].
您可以查看此 JSFIDDLE 或仅查看下面的 运行 代码片段以查看实际效果。
$(document).ready(function() {
$(window).scroll(function() {
$("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
$("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
$("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
$("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
setTimeout(function() {
$('.container').fadeIn();
}, 2000);
});
#hero {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background-image: url(../images/hero.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation: fadein 2s;
z-index: 0;
}
#hero-gradient {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background: linear-gradient(-45deg, #324f8f, #1a7ba7);
opacity: 0.90;
z-index: 1;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#hero .container {
padding-top: 300px;
display: none;
}
#hero-body {
max-width: 1100px;
margin: 0 auto;
color: #fff;
text-align: center;
font-weight: 200;
}
#button-container {
width: 1440px;
margin: 70px auto;
text-align: center;
max-width: 90%;
}
#learn-more-button {
margin-right: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border: 1px solid #fff;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
display: inline-block;
}
#learn-more-button:hover {
cursor: pointer;
width: 218px;
}
#find-us-button {
margin-left: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
display: inline-block;
}
#find-us-button:hover {
cursor: pointer;
width: 218px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="hero">
<div id="hero-gradient">
<div class="container">
<h1 id="hero-title">ASCO AUSTRALIA</h1>
<p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
<div id="button-container">
<a href="#learn-more-anchor">
<div id="learn-more-button" class="smoothScroll">LEARN MORE</div>
</a>
<a href="#learn-more-anchor">
<div id="find-us-button" class="smoothScroll">FIND US</div>
</a>
</div>
<a class="smoothScroll">
<img src="images/arrow.png" id="arrow" class="animated bounce">
</a>
</div>
</div>
</section>
见下面的代码。我有一个带有渐变叠加层和一些文本的主图。我有它,所以当网站打开时,这一切都会消失。我只想 image/gradient 首先淡入,一旦完全淡入,然后文本淡入或滑入。实现此目的的最佳方法是什么?对褪色文本的简单延迟?谢谢
HTML
<section id="hero">
<div id="hero-gradient">
<div class="container">
<h1 id="hero-title">ASCO AUSTRALIA</h1>
<p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
<div id="button-container">
<a href="#learn-more-anchor"><div id="learn-more-button" class="smoothScroll">LEARN MORE</div></a>
<a href="#learn-more-anchor"><div id="find-us-button" class="smoothScroll">FIND US</div></a>
</div>
<a class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a>
</div>
</div>
</section>
CSS
#hero {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background-image: url(../images/hero.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation: fadein 2s;
z-index: 0;
}
#hero-gradient {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background: linear-gradient(-45deg, #324f8f, #1a7ba7);
opacity: 0.90;
z-index: 1;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#hero .container {
padding-top: 300px;
}
#hero-body {
max-width: 1100px;
margin: 0 auto;
color: #fff;
text-align: center;
font-weight: 200;
}
#button-container {
width: 1440px;
margin: 70px auto;
text-align: center;
max-width: 90%;
}
#learn-more-button {
margin-right: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border: 1px solid #fff;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
display: inline-block;
}
#learn-more-button:hover {
cursor: pointer;
width: 218px;
}
#find-us-button {
margin-left: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
display: inline-block;
}
#find-us-button:hover {
cursor: pointer;
width: 218px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
$("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
});
$(document).ready(function(){
$(window).scroll(function(){
$("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
});
正如我在评论中所说,您不必使用多个 $(document).ready()
,一个就足够了。在这种情况下,同样适用于 $(window).scroll
。关于这个问题,我认为一个解决方案是使用 display: none;
隐藏 .container
元素,并使用 setTimeout()
方法在 x
秒后使用 [=19 显示它=].
您可以查看此 JSFIDDLE 或仅查看下面的 运行 代码片段以查看实际效果。
$(document).ready(function() {
$(window).scroll(function() {
$("#hero-title").css("opacity", 1 - $(window).scrollTop() / 380);
$("#hero-body").css("opacity", 1 - $(window).scrollTop() / 410);
$("#learn-more-button").css("opacity", 1 - $(window).scrollTop() / 450);
$("#find-us-button").css("opacity", 1 - $(window).scrollTop() / 450);
});
setTimeout(function() {
$('.container').fadeIn();
}, 2000);
});
#hero {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background-image: url(../images/hero.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation: fadein 2s;
z-index: 0;
}
#hero-gradient {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 890px;
background: linear-gradient(-45deg, #324f8f, #1a7ba7);
opacity: 0.90;
z-index: 1;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#hero .container {
padding-top: 300px;
display: none;
}
#hero-body {
max-width: 1100px;
margin: 0 auto;
color: #fff;
text-align: center;
font-weight: 200;
}
#button-container {
width: 1440px;
margin: 70px auto;
text-align: center;
max-width: 90%;
}
#learn-more-button {
margin-right: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border: 1px solid #fff;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
display: inline-block;
}
#learn-more-button:hover {
cursor: pointer;
width: 218px;
}
#find-us-button {
margin-left: 15px;
padding-top: 25px;
width: 200px;
height: 45px;
background-color: #009ee3;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 800;
text-align: center;
letter-spacing: 1px;
transition: 0.45s;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
display: inline-block;
}
#find-us-button:hover {
cursor: pointer;
width: 218px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="hero">
<div id="hero-gradient">
<div class="container">
<h1 id="hero-title">ASCO AUSTRALIA</h1>
<p id="hero-body">ASCO Australia provides Onshore Supply Base, Transport and Logistics, and Marine Supply Base services to the Energy, Resources, and Infrastructure industries across Australia.</p>
<div id="button-container">
<a href="#learn-more-anchor">
<div id="learn-more-button" class="smoothScroll">LEARN MORE</div>
</a>
<a href="#learn-more-anchor">
<div id="find-us-button" class="smoothScroll">FIND US</div>
</a>
</div>
<a class="smoothScroll">
<img src="images/arrow.png" id="arrow" class="animated bounce">
</a>
</div>
</div>
</section>