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

    分享一个花了一天写的一个小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 id="dowebok">
     <!--第一屏-->
    <div class="section section1">
    <div class="content">
    <div class="left_text">
      <div class="left_text01 animated bounceInLeft"><img src="images/section1_left_text01.png" width="523" height="54"></div>
      <div class="left_text02 animated zoomInLeft"><img src="images/section1_left_text02.png" width="345" height="58"></div>
    </div>
    <div class="right_text">
    <div class="right_text01 animated bounceInRight"><img src="images/section1_right_text01.png" width="215" height="47"></div>
    <div class="right_text02 animated zoomInRight"><img src="images/section1_right_text02.png" width="215" height="58"></div>
    </div>
    <div class="wine animated fadeInDown"><img src="images/section1_wine.png" width="438" height="416"></div>
    <div class="car animated wobble"><img src="images/section1_car.png" width="571" height="302"></div>
    </div>
     <div class="footer"></div>
    </div>
    
     <!--第二屏-->
    <div class="section section2">
    <div class="content">
    <div class="img">
    <div class="wine animated"><img src="images/section2_wine.png" width="1054" height="485"></div>
    <div class="caidai animated"><img src="images/caidai.png" width="998" height="146"></div>
    </div>
    <div class="footer animated"></div>
    </div>
    </div>
    
  <!--第三屏-->
    <div class="section section3">
    <div class="content">
    <div class="leftImg">
    <img src="images/caidai2.png" width="569" height="663" class="caidai2  animated">
    <img src="images/jiubei.png" width="323" height="501"  class="jiubei animated">
    <img src="images/water.png" width="528" height="190"  class="water animated">
    </div>
    <div class="rightText animated"><img src="images/section3_text.png" width="535" height="436"></div>
    </div>
    </div>
    <!--第四屏-->
  <div class="section section4">
    <div class="content">
    <div class="feedback_table">
    <input name="" type="text" class="text" placeholder="姓名：如何称呼您">
    <br />
    <input name="" type="text" class="text" placeholder="手机：您的联系方式">
    <br />
    <textarea name="" cols="" rows="" required>
    </textarea>
    <br />
    <input name="" type="button" value="提交" class="sub_btn">
    </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我。