快速提示：使用fullPage.js和Animate.css滚动动画

最新推荐文章于 2022-04-28 18:08:04 发布

翻译最新推荐文章于 2022-04-28 18:08:04 发布 · 1.5k 阅读

文章标签：

#python #java #css #js #vue #ViewUI

本文介绍如何结合fullPage.js和animate.css库创建基于滚动的页面动画。通过利用fullPage.js的回调功能和jQuery动态添加CSS动画，为页面的不同部分设置动画效果，如图像滑入、淡入等。

在上一教程中，我向您介绍了fullPage.js ，这是一个流行的jQuery插件，用于构建全屏页面。在此快速提示中，我将向您展示如何使用fullPage.js和animate.css创建基于滚动的动画。

所需的图书馆

出于本示例的目的，我设置了一个演示页面。如果您在“ 设置”标签下查看，您会看到我在笔中包含了以下库：

fullPage.js
animate.css
jQuery的
引导程序

Bootstrap框架并不重要。我添加它只是因为我想利用它的样式。

流程

我们的页面包括四个部分：每个人都填满整个页面（感谢fullPage）。用户将通过滚动或通过右侧的分页链接导航到下一部分。每次发生这种情况时，我们都会触发一些动画，例如将图像放置到适当位置。

在显示触发动画的代码之前，让我们首先介绍所需的步骤：

我们需要利用fullPage提供的“回调”功能。更具体地说，在我们的案例中，我们想为第二，第三和第四部分设置动画，因此我们将使用onLeave回调。如果要为第一部分制作动画，则可以使用afterLoad回调。以相同的方式，为动画幻灯片设置动画，我们应该使用afterSlideLoad和onSlideLeave函数。
我们将使用jQuery动态添加animate.css库提供CSS动画。
我们还将使用animate-delay CSS属性按顺序对元素进行animate-delay 。

现在，让我们深入了解动画！

动画＃1

页面的第二部分包括三幅图像和一个按钮。这是它的结构：

注意，我们已经将is-animated和is-animated__single类添加到要设置动画的元素中。另外，请记住，具有is-animated类的元素将共享相同的动画效果（例如， 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代码：

与前面的示例一样，我们将is-animated和is-animated__single类添加到所需的元素。

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

第四部分包含三个元素：两段和一个按钮。请参阅下面的结构：


   
      	
    
      		
     
      			
      
      				
       Some text here
      			
      
      			
      
      				
       Some text here

再次注意，我们为目标元素提供了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演示（尽管整页演示要有效得多）：

结论

在此快速提示中，我们学习了如何结合使用fullpage.js和animate.css库来构建基于滚动的动画。

如果您想改进此演示，可以尝试以下两件事：

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-scroll-animations-with-fullpagejs-and-animatecss--cms-25235