小窍门：利用fullPage.js和Animation.css来实现“滚动”动画效果

Chinese (Simplified) (中文（简体）) translation by Liyi (you can also view the original English article)

在前边的一个教程中，我向大家介绍了一款流行的jQuery插件fullPage.js，它可以用来构建全屏网页（full-screen pages）。在本节中，我将向大家展示：利用fullPage.js和animate.css，如何实现基于滚动的动画效果。

需要的js库

为这个例子，我特定制作了一个demo页面。当你查看设置（Settings）标签下的内容时，你将看到我添加了下边的一些库。

fullPage.js
animate.css
jQuery
Bootstrap

Bootstrap库并不是必须的，它只是用来设置一些样式。

过程

我们的页面由四个部分组成，每一部分都填满页面（感谢fullPage）。用户滚动鼠标，页面即会跳到下一个部分（section ）。或者，通过右边的分页链接，也可实现导航。每次当我们滚动或导航时，都会触发一些动画，比如：把图像带到某个位置。

在展示触发动画的代码之前，我们先来说明需要哪些步骤（来触发动画）。

我们需要利用fullPage提供的“回调”函数。在我们的例子中，更加具体地说，我们想要使第二、三、四部分实现动画效果，所以我们会使用onLeave回调函数。如果我们想要使第一部分“动起来”，我们可以使用回调函数afterLoad。同样的方式，为了使slides动起来，我们应该使用afterSlideLoad和onSlideLeave函数。
利用jQuery，我们将动态地添加css动画（animate.css提供）。
我们也将把动画按序应用到元素上，通过animate-delaycss属性来实现。

现在，让我们深入了解这些动画。

动画 #1

页面的第二部分包含三幅图像和一个按钮。下边是它的结构。

      <section class="section second">
          <div class="container">
              <div class="row">
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/nature">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/people">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/tech">
                  </div>
                  <div class="col-xs-12 text-center is-animated__single">
                      <button type="button" class="btn btn-lg">A Simple Button</button>
                  </div>
              </div><!--end of row-->
          </div><!--end of container-->
      </section>

你可以发现，我们已经把is-animated和is-animated__single这两个class添加到了我们想要应用动画的元素上。另外，记住一点：拥有is-animatedclass的所有元素将共享同样的动画效果（比如，fadeInUpBig）。

触发这部分动画的jQuery代码类似下边这样：

      var $isAnimatedSecond = $('.second .is-animated'),
          $isAnimatedSecondSingle = $('.second .is-animated__single');

      /* this code is part of the onLeave callback */    
      if( index == 1 && nextIndex == 2 ) {
          $isAnimatedSecond.addClass('animated fadeInUpBig'); 
          $isAnimatedSecond.eq(0).css('animation-delay', '.3s');
          $isAnimatedSecond.eq(1).css('animation-delay', '.6s');
          $isAnimatedSecond.eq(2).css('animation-delay', '.9s');
          $isAnimatedSecondSingle.addClass('animated rollIn').css('animation-delay', '1.7s');
      }

在本例中，当我们离开第一部分，移动到第二部分时，我们应用了两种不同的动画（fadeInUpBig和rollIn）到目标元素上。除此之外，我们使用animation-delay这个CSS属性来规定动画开始的时间。

动画 #2

第三部分包含两幅图像和一个按钮。下面，你可以看到相应的html代码：

      <section class="section third">
        <div class="container">
      		<div class="row">
      			<div class="col-sm-3 col-sm-offset-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/tech">
      			</div>
      			<div class="col-sm-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/any">
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
      				<button type="button" class="btn btn-lg">A Simple Button</button>
      			</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

就像前一个例子类似，我们添加了is-animated和 is-animated__singleclass到目标元素。

相应的jQuery代码如下：

        var $isAnimatedThird = $('.third .is-animated'),
            $isAnimatedThirdSingle = $('.third .is-animated__single');

        /* this code is part of the onLeave callback */
        if( ( index == 1 || index == 2) && nextIndex == 3 ) {
            $isAnimatedThird.eq(0).addClass('animated fadeInRightBig').css('animation-delay', '.3s'); 
            $isAnimatedThird.eq(1).addClass('animated fadeInLeftBig').css('animation-delay', '.6s');
            $isAnimatedThirdSingle.addClass('animated bounceInDown').css('animation-delay', '1.2s');
        }

在这部分，我们使用fadeInRightBig和fadeInLeftBig动画来顺序显示两幅图像。此外，我们使用bounceInDown动画来展示按钮。

动画 #3

第四部分由三个元素组成：两个段落和一个按钮。下面是它的结构：

      <section class="section fourth">
      	<div class="container">
      		<div class="row">
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
                	<button type="button" class="btn btn-lg">Thank You!</button>
        		</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

你可以再次看到，我们把is-animated和is-animated__single这两个类添加到了目标元素上。

接下来，我们来看一看相关的jQuery代码：

      var $isAnimatedFourth = $('.fourth .is-animated'),
          $isAnimatedFourthSingle = $('.fourth .is-animated__single');

      /* this code is part of the onLeave callback */
      if( ( index == 1 || index == 2 || index == 3 ) && nextIndex == 4 ) {
          $isAnimatedFourth.addClass('animated zoomIn').css('animation-delay', '.6s');
          $isAnimatedFourthSingle.addClass('animated lightSpeedIn').css('animation-delay', '1.2s')
          $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass('lightSpeedIn').addClass('zoomOutDown');
          });
      }

这里，利用zoomIn动画，两个段落同时出现了。而按钮这利用lightSpeedIn动画出现了。

接下来的代码还能帮助我们检测到动画什么时候结束：

      $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

在这个例子中，按钮只出现了几秒，然后我们利用之前提到的代码将它隐藏起来了。

下面你会看到嵌入式的Codepen例子（尽管full page demo更加有效果）

总结

在这个快速例子中，我们学到了一点：结合fullpage.js和animated.css这两个类库来构建基于滚动的动画。

如果你想要改进这个例子，可以从两个方面着手：

只在大屏幕上开启这些动画。为达到这个目标，请使用matchMedia方法。
你可以在onLeave函数中写你的业务代码。