现在很多官方网站都会采用全屏滚动的设计方式,全屏滚动加上简单的描述就能营造出高端大气的效果,实现全屏滚动的插件有很多,例如iscroll,fullpage等,今天着重学习一下fullpage.js插件
参考文章:http://blog.csdn.net/qianqianyixiao1/article/details/47148329
一.fullpage.js介绍
以下来自官网说明:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
二.fullpage.js兼容性
以下来自官网说明:
fullPage.js 支持 IE8+ 及其他现代浏览器。
三.使用方法
1.首先下载相关插件:
css部分:
js部分:
2.html部分
//注:每一个分页面的class一定要包含section,否则fullpage.css无法识别样式
<div id="indexList">
<div class="section active">
<h1 id="page1_h1">第一屏</h1>
</div>
<div class="section">
<h1 id="page2_h1">第二屏</h1>
</div>
<div class="section">
<h1 id="page3_h1">第三屏</h1>
</div>
<div class="section">
<h1 id="page4_h1">第四屏</h1>
</div>
</div>
3.实现页面切换和动画效果
注:此处动画采用animate.css处理
$(function(){
$("#indexList").fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'rgb(156, 206, 139)'],
afterLoad:function(anchorLink, index){//index从1开始
if(index == 1){
$("#page1_h1").addClass("animated fadeInLeft");
}
if(index == 2){
$("#page2_h1").addClass("animated bounce");
}
if(index == 3){
$("#page3_h1").addClass("animated fadeIn");
}
if(index == 4){
$("#page4_h1").addClass("animated fadeInLeft");
}
},
onLeave:function(index, direction){
if(index == 1){
$("#page1_h1").addClass("animated fadeInLeft");
}
}
});
});
完整代码如下:fullpage.js的demo
附:
注:本图截取自http://blog.csdn.net/qianqianyixiao1/article/details/47148329文章
写于2017.02.09
今天又需要用到fullpage+animate.css来制作滚动页面中的动画,我发现按照以前的写法
fterLoad:function(anchorLink, index){//index从1开始
alert(index);
}
通过判断Index的值来判断是否滚动到当前页面的时候,会有延迟,比如我从第一页滚动到第二页,alert会延迟1-2s才显示
解决方案:在页面滚动的时候监视下一页(对nextIndex做判断),这样可以有效的避免延迟
afterLoad:function( index,nextIndex,dir){
if(nextIndex == 2){
alert("滚动到第二页了");
}
}
写于2017.09.15