トリガーdivをスクロールするときのベロシティアニメーション

Question

divにスクロールした後に読み込むベロシティアニメーションがあります。 divはリストのようなスクロール可能なdivではなく、普通のdivです。だから私が望むのは、画面上に表示されたdivと、さらにアニメーションをロードするためにウェブサイトをさらにスクロールさせるようなものです。それ、どうやったら出来るの？これは、スクロールするときにアニメーションを読み込むべきdivです。

<div id="specialDiv2"> 
     <div class="ui two column doubling stackable grid container"> 
      <div class="column "> 
       <h1>What</h1> 
       <p id="coolParagraph2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div class="column "> 
       <img id="specialImage2" src="meganOMG.png"/> 
      </div> 
     </div> 
     <div class="ui center aligned container"> 
      <a id="arrow1" href="#"> 
       <i class="huge red angle double down icon"></i> 
      </a> 
     </div> 
    </div> 

これはアニメーションを適用する必要があるdivです。

<div id="specialDiv3"> 
    <div class="ui three column doubling stackable grid container"> 
     <div class="column columnFade"> 
      <h1>Benefits</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <i class="massive diamond icon"></i> 
     </div> 
     <div class="column columnFade"> 
      <h1>Platform</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <i class="massive diamond icon"></i> 
     </div> 
     <div class="column columnFade"> 
      <h1>Vision</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <i class="massive diamond icon"></i> 
     </div> 
    </div> 
    <br> 
    <hr width="40%"> 
    <br> 
</div> 

Answer 1

あなたはこのような関数を作ることができる：

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

そして、あなたのdiv（ELEM）を使用してJavaScriptでそれを使用

ここであなたを助ける良い質問と答えはですが、複雑なものです：

Check if element is visible after scroll