在div上滚动时触发速度动画

我有一个速度动画，必须在div上滚动后加载。 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>

来源

2017-07-04 Roberto

你可以做这样的功能：

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

而且在你的JavaScript与DIV（ELEM）

这里有一个很好的问题和答案，这将有助于你使用它，但它是复杂的东西：

Check if element is visible after scroll

来源

2017-07-04 22:57:10

在div上滚动时触发速度动画

回答

相关问题