fullPage插件全屏滑动效果

最新推荐文章于 2024-06-24 10:30:39 发布

HeavyShell

最新推荐文章于 2024-06-24 10:30:39 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： fullPage

本文链接：https://blog.csdn.net/xw505501936/article/details/49784059

版权

javascript 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。

其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