javascript - 特定部分的文本动画

Question

我有一个单页网站，我在其中使用了一页滚动 JavaScript。我想在加载特定部分时在文本上显示动画。动画在页面加载后立即开始工作，但在部分加载时不工作

 <section class="page6" id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
              <h2 style="font-size: 5em; text-align: justify;">Networking for artists</h2><br>
              <h2 style="float: left; font-size: 4em; color: rgb(79, 79, 79);">By artists</h2>

            </div>
        </div>
    </div>
</section>

Answer 1

您可以使用一个函数来检查您的特定部分是否在视口(viewport)中。之后在滚动事件上调用此函数。

 function isInViewport(particularSection) {
    if (
        window.pageYOffset >= particularSection.offsetTop - particularSection.offsetHeight / 2 &&
        window.pageYOffset <= particularSection.offsetTop + particularSection.offsetHeight / 2
        ) {
        return true;
} else {
    return false;
}
};



 window.addEventListener("scroll", function(){
    if(isInViewport(particularSection)){
        // put a class on section to start animation
    }
})