我正在使用Intersection Observer API来在用户滚动到内容时显示元素。它工作正常,但我想延迟
的显示时间
,如果有4个,我希望第一个
出现后0.5秒再出现下一个...不要同时出现。在这个示例中,效果只适用于第一个
class
,如果有多个class
(就像这里有的那样),它将不会应用于下一个img classes
,只适用于第一个。你可以在这个页面底部看到这个示例。<section id="staff" style="padding-top: 100px;">
<div class="col-lg-12 mx-auto mb-5">
<div class="container">
<div class="row icons-info">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<img class="floating show-bottom" src="img/Muñeco 1-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="img/Muñeco 2-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="img/Muñeco 3-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<img class="floating" src="img/Muñeco 1-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
</div>
</div>
</div>
</section>
JS
// Instantiate a new Intersection Observer
let observer7 = new IntersectionObserver(onEntry7);
let staff = document.querySelector('.floating');
let element7 = document.querySelector("#staff p");
observer7.observe(element7);
function onEntry7(entry7) {
if (entry7[0].isIntersecting) {
staff.classList.add("show-bottom");
}
}
CSS
.floating {opacity: 0; transition: 1s opacity;}
.floating.show-bottom {opacity: 1;
animation: movefromtop 1s alternate infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;}
@keyframes movefromtop {
from {
transform: translateY(-5em);
}
to {
transform: translateY(0em);
}
}