酷炫的页面滚动切换动画效果

    分享一个花了一天写的一个小demo，使用了fullPage.min.js+animate.min.css，很酷炫。

制作方法

1、引入文件

引入以下文件，你可以将 js 放到页面底部。

<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="style/animate.min.css"/> 
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

2、HTML

由于 HTML 代码较多，就不全部贴上来，这里只贴“第一屏”的代码，如下：

 <div >
    </div>
    </div>
  </div>
</div>

3、JavaScript

  <script type="text/javascript">
 $(function(){
        $('#dowebok').fullpage({
        sectionsColor: ['#360000', '#680501', '#680501', '#680501'],
        anchors: ["screen_1","screen_2","screen_3","screen_4"],
        navigation: true,
        afterLoad: function(anchorLink, index){
            if(index == 1){
                $('.section1').find('.content .left_text .left_text01').removeClass('bounceOutLeft').addClass('bounceInLeft');
                $('.section1').find('.content .left_text .left_text02').removeClass('zoomOutLeft').addClass('zoomInLeft');
                $('.section1').find('.content .right_text .right_text01').removeClass('bounceOutRight').addClass('bounceInRight');
                $('.section1').find('.content .right_text .right_text02').removeClass('zoomOutRight').addClass('zoomInRight');
                $('.section1').find('.content .wine').addClass('fadeInDown');
                $('.section1').find('.content .car').addClass('wobble');
            }
            if(index == 2){
                $('.section2').find('.content .img .wine').addClass('zoomInDown');
                $('.section2').find('.content .img .caidai').addClass('rubberBand');
                $('.section2').find('.content .footer').addClass('zoomInUp');
            }
                if(index == 3){
                $('.section3').find('.leftImg .caidai2').addClass('flash');
                $('.section3').find('.leftImg .jiubei').addClass('tada');
                $('.section3').find('.leftImg .water').addClass('pulse');
                $('.section3').find('.leftImg .water').addClass('pulse');
                $('.section3').find('.rightText').addClass('bounceInDown');
            }

        },
        onLeave: function(index, direction){
             if(index != 1 ){                
              $('.section1').find('.content .left_text .left_text01').removeClass('bounceInLeft').addClass('bounceOutLeft');
              $('.section1').find('.content .left_text .left_text02').removeClass('zoomInLeft').addClass('zoomOutLeft');
              $('.section1').find('.content .right_text .right_text01').removeClass('bounceInRight').addClass('bounceOutRight');
              $('.section1').find('.content .right_text .right_text02').removeClass('zoomInRight').addClass('zoomOutRight');
              $('.section1').find('.content .wine').removeClass('fadeInDown');
              $('.section1').find('.content .car').removeClass('wobble');
              }
              if(index != 2){
                $('.section2').find('.content .img .wine').removeClass('zoomInDown');
                $('.section2').find('.content .img .caidai').removeClass('rubberBand');
                $('.section2').find('.content .footer').removeClass('zoomInUp');                
            }
                if(index != 3){
                $('.section3').find('.leftImg .caidai2').removeClass('flash');
                $('.section3').find('.leftImg .jiubei').removeClass('tada');
                $('.section3').find('.rightText .water').removeClass('pulse');
                $('.section3').find('.rightText').removeClass('bounceInDown');
            }
        }
    });

  });
</script>

     因没有部署到服务器上预览不了效果 需要的可以m我。