特定部分的文本動畫

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