特定部分的文本动画

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

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

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