Trigger Velocity Animation beim Scrollen über ein Div

Question

Ich habe eine Geschwindigkeitsanimation, die nach dem Scrollen auf einem Div geladen werden muss. Das div ist kein scrollbares div wie eine Liste, es ist nur ein normales div. Also was ich will ist sowas wie ich habe das div auf dem bildschirm angezeigt und wenn ich weiter runter scrolle auf der website um eine bestimmte animation zu laden. Wie mache ich das? Dies ist das Div, das beim Scrollen die Animation laden soll.

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

Dies ist das Div, wo ich die Animation anwenden muss.

<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

Sie könnten eine Funktion wie diese machen:

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

und verwenden Sie es in Ihrem Javascript, mit div (Elem)

Hier ist eine gute Frage und Antwort, die Ihnen helfen, aber es ist kompliziertes Zeug:

Check if element is visible after scroll