fullPage插件全屏滑动效果
2015-11-11 17:16
288 查看
fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。
其Github地址：https://github.com/powy1993/fullpage
html代码：
css代码：
js代码：
demo地址：http://test.ixiewei.com/fullPage/
参考地址：http://segmentfault.com/a/1190000002603964
其Github地址：https://github.com/powy1993/fullpage
html代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>fullPage全屏滑动效果</title> <meta name="description" content="fullPage全屏滑动效果"> <meta name="keywords" content="fullPage全屏滑动效果"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link rel="stylesheet" href="style/index.css"/> </head> <body> <div id="pageContain"> <div class="page page1 current"> <div class="contain"> <section class="psec psec1"> <div class="psecin leMo"> <img src="images/s01_icon02_1440.png" alt=""/> </div> <div class="psecin riMo"> <div class="to"> <img width="178px" height="304px" src="images/phone/p001.png" alt=""/> </div> <div class="bo"> <img width="132px" height="132px" src="images/ryj-pc-code.png" alt=""/> <ul> <li><a href="">android版下载</a></li> <li><a href="">iphone版下载</a></li> </ul> </div> </div> </section> <section class="nav"> <div> <a class="logo" href=""><img width="112px" height="34px" src="images/s02_icon04.png" alt=""/></a> <ul> <li><a href="">关于我们</a></li> <li><a href="">新闻动态</a></li> </ul> </div> </section> </div> </div> <div class="page page2" data-step="2"> <div class="contain"> <section class="psec psec2"> <div class="psecin leMo"> <img src="images/s01_icon02_1440.png" alt=""/> </div> <div class="psecin riMo"> <div class="to"> <img width="178px" height="304px" src="images/phone/p001.png" alt=""/> </div> <div class="bo"> <img width="132px" height="132px" src="images/ryj-pc-code.png" alt=""/> <ul> <li><a href="">android版下载</a></li> <li><a href="">iphone版下载</a></li> </ul> </div> </div> <div class="windmill"> <div> <img class="img1" src="images/s02_icon04.png" alt=""/> <img class="img2" src="images/s02_icon05.png" alt=""/> <img class="img3" src="images/s02_icon06.png" alt=""/> </div> </div> </section> </div> </div> <div class="page page3" data-step="2"> <div class="contain"> <section class="psec psec3"> <div class="psecin leMo"> <img src="images/s01_icon02_1440.png" alt=""/> </div> <div class="psecin riMo"> <div class="to"> <img width="178px" height="304px" src="images/phone/p001.png" alt=""/> </div> <div class="bo"> <img width="132px" height="132px" src="images/ryj-pc-code.png" alt=""/> <ul> <li><a href="">android版下载</a></li> <li><a href="">iphone版下载</a></li> </ul> </div> </div> </section> <div class="car"> <img src="images/s03_icon08.png" alt=""/> </div> </div> </div> <div class="page page4"> <div class="contain"> <section class="psec psec4"> <div class="psecin leMo"> <img src="images/s01_icon02_1440.png" alt=""/> </div> <div class="psecin riMo"> <div class="to"> <img width="178px" height="304px" src="images/phone/p001.png" alt=""/> </div> <div class="bo"> <img width="132px" height="132px" src="images/ryj-pc-code.png" alt=""/> <ul> <li><a href="">android版下载</a></li> <li><a href="">iphone版下载</a></li> </ul> </div> </div> <div class="boat"> <img src="images/s04_boat.png" alt=""/> </div> </section> </div> </div> <div class="page page5"> <div class="contain"> <section class="psec psec5"> <div class="psecin leMo"> <img src="images/s01_icon02_1440.png" alt=""/> </div> <div class="psecin riMo"> <div class="to"> <img width="178px" height="304px" src="images/phone/p001.png" alt=""/> </div> <div class="bo"> <img width="132px" height="132px" src="images/ryj-pc-code.png" alt=""/> <ul> <li><a href="">android版下载</a></li> <li><a href="">iphone版下载</a></li> </ul> </div> </div> </section> </div> </div> </div> <ul id="navBar"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/fullPage.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
css代码：
body, div, p, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
text-decoration: none
}
body {
width: 100%;
overflow: hidden;
font: 16px/1.5 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
}
#pageContain {
overflow: hidden
}
.page {
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.slide, .swipe {
display: block;
z-index: 2;
}
.contain {
width: 100%;
height: 100%;
position: relative;
z-index: 0
}
.current {
display: block;
z-index: 1;
}
/*导航条*/
#navBar {
z-index: 3;
position: absolute;
top: 50%;
right: 20px;
margin-top: -50px
}
#navBar .active {
width: 10px;
height: 10px;
margin: 0 0 10px 0;
background: #f05b34
}
#navBar li {
cursor: pointer;
margin: 0 0 10px 2px;
transition: all .2s ease;
border-radius: 50%;
width: 6px;
height: 6px;
background: rgba(85, 85, 85, 0.6)
}
.psec {
width: 1024px;
height: 100%;
margin: 0 auto;
position: relative
}
.psecin {
position: absolute;
opacity: 0
}
.psec .leMo {
width: 542px;
height: 600px;
background: url(../images/s01_icon01_1440.png) no-repeat center bottom;
top: 50%;
left: -542px;
margin-top: -300px
}
.psec .leMo img {
margin: 80px 0 0 100px
}
.psec .riMo {
width: 360px;
height: 500px;
top: 50%;
right: -360px;
margin-top: -250px
}
.psec .riMo .to {
width: 304px;
height: 360px;
background: url(../images/s01_icon03.png) no-repeat;
background-size: 304px 360px;
margin: 0 0 0 30px
}
.psec .riMo .to img {
width: 178px;
height: 304px;
margin: 56px 0 0 60px
}
.psec .riMo .bo {
margin: 20px 0 0 0
}
.psec .riMo .bo img {
width: 132px;
height: 132px;
float: left
}
.psec .riMo .bo ul {
float: left;
margin: 8px 0 0 12px
}
.psec .riMo .bo ul li {
margin: 0 0 12px 0
}
.psec .riMo .bo ul li a {
display: block;
width: 180px;
height: 52px;
border-radius: 15px 0 15px 0;
background: #f05b34;
color: #fff;
line-height: 52px;
text-align: center
}
.psec .riMo .bo ul li a:hover {
opacity: 0.9
}
/*第1屏*/
.page1 {
background: url(../images/bj_01.jpg) no-repeat;
background-size: 100% 100%;
}
.page1 div section.nav {
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.8);
position: absolute;
top: 0;
left: 0
}
.page1 div section.nav div {
width: 1024px;
height: 60px;
margin: 0 auto
}
.page1 div section.nav div a.logo {
display: block;
width: 112px;
height: 34px;
float: left;
margin: 15px 0 0 0
}
.page1 div section.nav div a.logo img {
width: 112px;
height: 34px
}
.page1 div section.nav div ul {
float: right
}
.page1 div section.nav div ul li {
float: right;
height: 60px;
margin: 0 0 0 54px
}
.page1 div section.nav div ul li a {
display: block;
height: 60px;
line-height: 60px;
text-align: center;
color: #555;
font-size: 12px;
}
.page1 div section.nav div ul li a:hover {
color: #f05b34
}
/*第2屏*/
.page2 {
background: url(../images/bj_02.jpg) no-repeat;
background-size: 100% 100%;
}
.psec2 .windmill {
width: 100px;
height: 100px;
position: absolute;
bottom: 100%;
left: 0px;
transition: all 0.4s ease
}
.psec2 .windmill div {
width: 100px;
height: 100px;
position: relative
}
.psec2 .windmill div img {
position: absolute
}
.psec2 .windmill div .img1 {
width: 40px;
height: 80px;
bottom: 0;
left: 80px
}
.psec2 .windmill div .img2 {
width: 60px;
height: 60px;
bottom: 34px;
left: 70px;
animation: windmill_rotate infinite 6s linear;
-webkit-animation: windmill_rotate infinite 6s linear;
-moz-animation: windmill_rotate infinite 6s linear;
-o-animation: windmill_rotate infinite 6s linear;
}
/*风车动画*/
@keyframes windmill_rotate {
from {
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
}
}
@-webkit-keyframes windmill_rotate {
from {
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
}
}
@-moz-keyframes windmill_rotate {
from {
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
}
}
@-o-keyframes windmill_rotate {
from {
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
}
}
.psec2 .windmill div .img3 {
width: 11px;
height: 14px;
bottom: 56px;
left: 94px
}
.psec2 .leMo, .psec2 .riMo {
transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.step1 .psec2 .windmill {
bottom: 3%;
}
.step2 .psec2 .windmill {
bottom: 3%;
}
.step2 .psec2 .leMo {
opacity: 1;
left: 40px
}
.step2 .psec2 .riMo {
opacity: 1;
right: 40px
}
/*第3屏*/
.page3 {
background: url(../images/bj_03.jpg) no-repeat;
background-size: 100% 100%;
}
.page3 div .car {
position: absolute;
bottom: 10px;
left: 0px;
transition: all 2s linear;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
}
.page3 div .car img {
width: 80px
}
.step1 div .car {
left: 50%
}
.step2 div .car {
left: 100%
}
/*第4屏*/
.page4 {
background: url(../images/bj_04.jpg) no-repeat;
background-size: 100% 100%;
}
.psec4 .boat {
position: absolute;
bottom: 3%;
left: 0%;
animation: boat_line infinite 120s linear;
-webkit-animation: boat_line infinite 120s linear;
-moz-animation: boat_line infinite 120s linear;
-o-animation: boat_line infinite 120s linear;
}
/*帆船动画*/
@keyframes boat_line {
0% {
left: 0%
}
50% {
left: 100%
}
100% {
left: 0%
}
}
@-webkit-keyframes boat_line {
0% {
left: 0%
}
50% {
left: 100%
}
100% {
left: 0%
}
}
@-moz-keyframes boat_line {
0% {
left: 0%
}
50% {
left: 100%
}
100% {
left: 0%
}
}
@-o-keyframes boat_line {
0% {
left: 0%
}
50% {
left: 100%
}
100% {
left: 0%
}
}
.psec4 .boat img {
width: 97px;
height: 126px
}
/*第5屏*/
.page5 {
background: url(../images/bj_05.jpg) no-repeat;
background-size: 100% 100%;
}js代码：
var runPage;
runPage = new FullPage({
id: 'pageContain', // id of contain
slideTime: 600, // time of slide
continuous: false, // create an infinite feel with no endpoints
effect: { // slide effect
transform: {
translate: 'Y', // 'X'|'Y'|'XY'|'none'
scale: [1, 1], // [scalefrom, scaleto]
rotate: [0, 0] // [rotatefrom, rotateto]
},
opacity: [1, 1] // [opacityfrom, opacityto]
},
mode: 'wheel,touch,nav:navBar', // mode of fullpage
easing: 'ease-out' // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
, onSwipeStart: function (index, thisPage) { // callback before pageChange
}
, beforeChange: function (index, thisPage) { // callback before pageChange
}
, callback: function (index, thisPage) { // callback when pageChange
playAniIn(index + 1);
}
});
playAniIn(runPage.thisPage() + 1);
function playAniIn(num) {
for (i = 1; i <= 5; i++) {
if (i != 2) {
if (num == i) {
//元素动画
$('.psec' + i + ' .leMo').animate({"opacity": "1", "left": "40px"}, 300);
$('.page' + i + ' .riMo').animate({"opacity": "1", "right": "40px"}, 300);
} else {
$('.psec' + i + ' .leMo').animate({"opacity": "0", "left": "-542px"}, 300);
$('.page' + i + ' .riMo').animate({"opacity": "0", "right": "-360px"}, 300);
}
}
}
}demo地址：http://test.ixiewei.com/fullPage/
参考地址：http://segmentfault.com/a/1190000002603964
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
- fullPage 使用总结
- jQuery全屏滚动插件fullPage.js
- fullpage插件学习
- fullPage
- swiper.js中内容超出一屏可滑动
- fullpage（全屏滚动）
- 使用jquery.fullpage.js需要动态改变导航小圆点的样式
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage(转自https://github.com/powy1993/fullpage)
- fullpage.js如何重置每页的animate()动画
- angularjs fullpage全屏滚动插件
- angular-fullpage实现尾屏效果
- fullpage的使用方法及配置项 （慕课网视频总结）
- fullpage（jQuery全屏滚动插件）插件的使用
- fullPage教程 -- 整屏滚动效果插件 fullpage详解e
- fullpage.js---全屏滚动插件
- Fullpage 插件配置项
- jQuery fullpage全屏的步骤及注意事项
- fullpage全屏插件简介