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

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

制作方法

1、引入文件

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

<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我。