javascript - 特定部分的文字动画

我有一个使用一个页面滚动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>

最佳答案

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

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

关于javascript - 特定部分的文字动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29816385/