频道导航

基于jquery实现全屏滚动效果

2019-01-01 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了基于jquery实现全屏滚动效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

那么今天就来介绍这款fullPage，与fullPage.js是不同的，fullpage兼容性更佳，能向下兼容到IE6，不依赖任何 js 库，可独立使用。功能上虽然不如 fullPage.js 强大，但一般使用已经足够了，尤其是它的动画效果，你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持 fullPage.js 所没有的水平滚动。

兼容桌面端(ie5.5+) 和手机端
你可以用它来构建你的个人主页或者网页应用
这是一个不使用jQuery小巧的框架不到9KB

再介绍之前先看一看运行效果图：

引入核心库，pagefull的依赖任何JS库，所以只需引入它本身就可以了

写入html

代码，移动端使用 <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

<div class="page page3" data-step="4">
<div class="contain">
<p class="demo-data-step">data-step可以让你在不切屏的情况下更换动画

写入CSS，不熟悉CSS3的朋友请回去补下，这里不做解析了，CSS可以根据项目的需求自由的定义。

p {
width: 200px;
height: 100px;
color:#fff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
opacity: 1;
transition: all .8s ease;
transform-origin: 50% 50%;
}
.step1 p {
transform: translate(0,-50px);
-webkit-transform: translate(0,-50px);
}
.step2 p {
opacity: 0;
transform: scale(2);
-webkit-transform: scale(2);
}
.step3 p {
transform: scale(1);
-webkit-transform: scale(1)
opacity: 1;
}
.step4 p {
-webkit-transform: rotate(360deg) translate(0,-200px) scale(.3);
transform: rotate(360deg) translate(0,-200px) scale(.3);
opacity: 0;
}

写入JS，实现效果

runPage = new FullPage({

id : 'pageContain',// 容器id
slideTime : 800,// 每页切换时间，单位为毫秒
continuous : false,// 是否循环(即能从最后页跳到第一页面)
effect : { // 滚动效果
transform : {
translate : 'Y',// 'X'|'Y'|'XY'|'none' X轴|Y轴|XY轴|无
scale : [.1,1],// [scalefrom,scaleto] [起始缩放比例,结束时缩放比例]
rotate : [0,0] // [rotatefrom,rotateto] [起始旋转角度,结束时旋转角度]
},opacity : [0,1] // [opacityfrom,opacityto][起始透明度,结束时透明度]
},mode : 'wheel,touch,nav:navBar',// 转换模式 'wheel,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'
easing : 'ease' // easing('ease','ease-in','ease-in-out' 或使用贝塞尔曲线 [.33,1.81,1,1];
//,onSwipeStart : function(index,thisPage) { // 触摸开始时的回调函数
// return 'stop';
// }
//,beforeChange : function(index,thisPage) { // 滑动开始时的回调函数
// return 'stop';
// }
//,callback : function(index,thisPage) { // 滑动结束后的回调函数
// alert(index);
// };
});