简单的分屏效果

Posted 2020-08-25

其实要实现分屏效果，只要结合jquery.min.js并引入一个外部包jquery.fullPage.min.js就可以得到想要的效果

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script>
    $(function(){
        //调用插件方法
        $("#360page").fullpage({
            //设置每一屏的颜色
            sectionsColor:[‘#0da5d6‘, ‘#2AB561‘, ‘#DE8910‘, ‘#16BA9D‘, ‘#0DA5D6‘],
            //滚动到某一屏后触发
            afterLoad:function(afterLine,index){
                // current：仅仅是当前这一屏的标识
                $(‘.section‘).removeClass("current");
                setTimeout(function(){
                    //滚动到某一屏后，在展示动画效果，我们可以先定义样式，在将样式添加到元素上
                    $(".section").eq(index-1).addClass("current");
                },200);
            }
        })
    })
</script>

 

html结构代码如下：

<div id="360page">
        <div class="section first">
            <div class="logo"></div>
            <div class="text">
                <img src="./images/text_1.png" alt=""/>
                <img src="./images/text_2.png" alt=""/>
                <img src="./images/text_3.png" alt=""/>
                <img src="./images/text_4.png" alt=""/>
                <img src="./images/text_5.png" alt=""/>
                <img src="./images/text_6.png" alt=""/>
                <img src="./images/text_7.png" alt=""/>
                <img src="./images/text_8.png" alt=""/>
            </div>
            <div class="info">
                <img src="./images/info_1.png" alt=""/>
            </div>
        </div>

        <div class="section second">
            <div class="shield">
                <img src="./images/shield_1.png" alt=""/>
                <img src="./images/shield_2.png" alt=""/>
                <img src="./images/shield_3.png" alt=""/>
                <img src="./images/shield_4.png" alt=""/>
                <img src="./images/shield_5.png" alt=""/>
                <img src="./images/shield_6.png" alt=""/>
                <img src="./images/shield_7.png" alt=""/>
                <img src="./images/shield_8.png" alt=""/>
                <img src="./images/shield_9.png" alt=""/>
            </div>
            <div class="info"></div>
        </div>

        <div class="section third">
            <div class="info"></div>
            <div class="circle"></div>
            <div class="rocket"></div>
        </div>

        <div class="section fourth">
            <div class="search">
                <div class="searchBar"></div>
                <div class="key"></div>
                <div class="result"></div>
            </div>
            <div class="info"></div>
        </div>

        <div class="section fifth">
            <div class="info"></div>
            <div class="browser">
                <div class="toolBarLine"></div>
                <div class="left"></div>
                <div class="top"></div>
                <div class="right"></div>
                <div class="bottom"></div>
                <div class="bottomLine"></div>
                <div class="bottomInfo"></div>
            </div>
        </div>
    </div>

css样式代码（ccs3）：

*{
            margin: 0;
            padding: 0;
        }
        /*第一屏*/
        .first{}
        .first .logo {
            height: 186px;
            background: url("./images/logo.png") no-repeat center center;
            padding-top: 50px;
        }
        .first .text {
            text-align: center;
            margin-top: 50px;
        }
        .first .text>img {
            margin:0 30px;
            opacity: 0.1;
        }
        .first .info {
            text-align: center;
            margin-top: 50px;
        }
        .first .info>img {
            opacity: 0.1;
        }
        /*第一屏动画*/
        .first.current .text>img {
            margin:0 3px;
            opacity: 1;
            transition: all .8s;
        }
        .first.current .info>img {
            opacity: 1;
            transition: all 2s;
        }

        /*第二屏*/
        .second{
            font-size: 0;
        }
        .second>div {
            display: flex;
            justify-content: space-around;
            /*设置内容垂直居中*/
            align-items: center;
        }
        .second .shield {
            width: 440px;
        }
        .second .info {
            width: 635px;
            height: 309px;
            background: url("./images/info_2.png") no-repeat;
        }
        .second .shield>img:nth-child(1){
            transform: translate(800px,300px) rotate(60deg);
        }
        .second .shield>img:nth-child(3){
            transform: translate(-300px,400px) rotate(60deg);
        }
        .second .shield>img:nth-child(7){
            transform: translate(500px,-400px) rotate(60deg);
        }
        .second .shield>img:nth-child(9){
            transform: translate(-300px,-400px) rotate(60deg);
        }
        /*第二屏动画*/
        .second.current .shield>img {
            transform: none;
            transition: all .8s;
        }
        
        /*第三屏*/
        .third{
            position: relative;
            overflow: hidden;
        }
        .third>div{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .third .info {
            width: 631px;
            height: 278px;
            background: url("./images/info_3.png") no-repeat;
        }
        .third .circle {
            width: 453px;
            height: 449px;
            background: url("./images/circle.png") no-repeat;
        }
        .third .rocket {
            width: 203px;
            height: 449px;
            background: url("./images/rocket.png") no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(0px,700px);
        }
        /*第三屏动画*/
        .third.current .rocket {
            transform: translate(950px,230px);
            transition: all .8s;
        }
        
        /*第四屏*/
        .fourth{}
        .fourth>div {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .fourth .info {
            width: 612px;
            height: 299px;
            background:url("./images/info_4.png") no-repeat;
        }
        .fourth .search {
            width: 529px;
            height: 349px;
            position: relative;
        }
        .fourth .search .searchBar {
            width: 529px;
            height: 66px;
            background: url("./images/search.png") no-repeat;
            transform: translate(-120%,0px);
        }
        .fourth .search .key {
            /*width: 99px;*/
            width: 0px;
            height: 22px;
            background: url("./images/key.png") no-repeat;
            position: absolute;
            top: 22px;
            left: 15px;
        }
        .fourth .search .result {
            width: 529px;
            /*height: 372px;*/
            height: 0px;
            background: url("./images/result.png") no-repeat;
        }
        /*第四屏动画*/
        .fourth.current .search .searchBar {
            transform: translate(0,0);
            transition: all .5s;
        }
        .fourth.current .search .key {
            width: 99px;
            transition: all 1.5s steps(10) .5s;
        }
        .fourth.current .search .result {
            height: 372px;
            transition: all .5s 2s;
        }

        /*第五屏*/
        .fifth{}
        .fifth>div {
            display: flex;
            flex-flow: column;
            align-items: center;
        }
        .fifth .info {
            width: 1077px;
            height: 134px;
            background: url("./images/info_5.png") no-repeat;
            margin-top: 30px;
        }
        .fifth .browser {
            width: 1044px;
            height: 79px;
            background: url("./images/toolbar.png") no-repeat;
            flex: 1;
            margin-top: 50px;
            position: relative;
        }
        .fifth .browser .toolBarLine {
            width: 0px;
            height: 0px;
            border:1px solid #fff;
            position: absolute;
            top: 28px;
            left: 82px;
        }
        .fifth .browser .left {
            width: 1px;
            height:0%;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
        }
        .fifth .browser .top {
            width: 0%;
            height: 1px;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
        }
        .fifth .browser .right {
            width: 1px;
            height:0%;
            background-color: #fff;
            position: absolute;
            top: 0;
            right: 0;
        }
        .fifth .browser .bottom {
            width:0%;
            height: 1px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .fifth .browser .bottomLine {
            width: 0%;
            height: 1px;
            background-color: #fff;
            position: absolute;
            bottom: 20px;
            left: 0;
        }
        .fifth .browser .bottomInfo {
            width: 100%;
            height: 20px;
            background: url("./images/extra.png") no-repeat right center;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        /*第五屏动画*/
        .fifth.current .toolBarLine {
            width: 900px;
            height: 30px;
            transition: all 1s;
        }
        .fifth.current .left {
            height: 100%;
            transition: all 1s;
        }
        .fifth.current .top {
            width: 100%;
            transition: all 1s;
        }
        .fifth.current .right {
            height: 100%;
            transition: all 1s;
        }
        .fifth.current .bottom {
            width: 100%;
            transition: all 1s;
        }
        .fifth.current .bottomLine {
            width: 100%;
            transition: all 1s;
        }
        .fifth.current .bottomInfo {}