滚动 div 时触发 Velocity 动画答案

【问题标题】：Trigger Velocity animation when scrolling over a div滚动 div 时触发 Velocity 动画
【发布时间】：2017-08-02 10:57:58
【问题描述】：

我有一个速度动画，必须在向下滚动 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>

【问题讨论】：

标签： javascript css meteor velocity.js

【解决方案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));
 }

并在您的 javascript 中与您的 div (elem) 一起使用它

这里有一个很好的问题和答案，可以帮助你，但它是复杂的东西：

Check if element is visible after scroll

【讨论】：