javascript - 滚动 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));
 }

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

这里有一个很好的问题和答案，可以帮助您，但它很复杂:

Check if element is visible after scroll