模擬滑屏動畫

chenbogger發表於2018-08-30
動畫

HTML內容：

<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入jQuery檔案-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--引入swipe檔案-->
    <script src="js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
    <!--引入js檔案-->
    <script type="text/javascript" src="js/weixin3.js"></script>
    <!--引入css檔案-->
    <link type="text/css" href="css/weixin3.css" rel="stylesheet" />
</head>
<body>
    <div id="container">
        <!--第一頁-->
        <div class="page page1">
            <!--背景圖-->
            <img src="img/indexBuilding.png" class="page1_building" />
            <!--轉角遇到愛的文字-->
            <img src="img/indexTxt.png" class="page1_title"/>
            <!--設定雲-->
            <img src="img/indexCloud.png" class="page1_cloud" />
            <!--其他元素-->
            <img src="img/indexElements.png" class="page1_elements" />
            <!--兩朵太陽花-->
            <img src="img/indexFlowers01.png" class="page1_leftflower" />
            <img src="img/indexFlowers02.png" class="page1_rightflower" />
            <!--人-->
            <img src="img/indexFlight.png" class="page1_person"/>
        </div>

        <!--第二頁-->
        <div class="page page2">
            <img src="img/wasBg.jpg" class="page2_back"/>
            <img src="img/wasFarm.png" class="page2_title1" />
            <img src="img/wasIT.png" class="page2_title2"/>
        </div>

        <!--第三頁-->
        <div class="page page3">
            <img src="img/lastBusStation.png" class="page3_back"/>
            <img src="img/earlyTitle.png" class="page3_early" />
            <img src="img/lastBusTitle.png" class="page3_last" />
            <img src="img/bus.png" class="page3_bus" />
            <img src="img/lastBusAvatar.png" class="page3_person" />
        </div>

        <!--第四頁-->
        <div class="page page4">
            <!--場景1-->
            <img src="img/lightOffBg.jpg" class="page4_back1" />
            <img src="img/cornerTitle.png" class="page4_title1" />
            <img src="img/clickGuide.png" class="page4_guide"/>

            <!--場景2-->
            <img src="img/lightOnBg.jpg" class="page4_back2" />
            <img src="img/weKnowYou.png" class="page4_title2" />

            <!--場景1 和 場景2 共同的燈  點選事件 切換圖片-->
            <img src="img/lightOff.png" class="page4_light" onclick="onlight(this)"/>
        </div>
    </div>
</body>
</html>

css內容

//定義一個變數，記錄當前的頁碼
var currentPage = 0;

$(function(){

    //1.獲取視窗的大小
    var w_width = window.innerWidth;
    var w_height = window.innerHeight;

    //2.設定容器的大小
    var container = $("#container");
    container.width(w_width);
    container.height(w_height * 4);

    //3.設定每一頁的大小
    var divPage = $(".page");
    divPage.width(w_width);
    divPage.height(w_height);

    //4.第一頁
    //背景有一個淡入的效果，人有一個飛入的效果
    $(".page1_building").fadeIn(1000,function(){
        $(".page1_person").animate({"left":"15%","width":"70%"},1500);
    })

    //5.向上滑動翻頁：Swape外掛的使用
    container.swipe({

        /*
         * event:事件物件
         * direction：滑動的方向
         * distance：滑動的距離
         * duration：持續的時間
         * fingerCount：滑動需要的手指個數
         */
        swipe:function(event,direction,distance,duration,fingerCount){

            if(direction == "up"){     //向上滑動

                currentPage++;

            } else if(direction == "down"){ //向下滑動
                currentPage--;
            }

            //臨界值
            if(currentPage > 3){
                currentPage = 3;
            }
            if(currentPage < 0){
                currentPage = 0;
            }

            //給整體新增動畫
            //注意：容器向上移動一個頁面，距離top的值為-（一個頁面的高度）
            container.animate({"top":currentPage * (-w_height) + "px"},400,function(){
                //第二頁
                if(currentPage == 1){
                    //背景圖淡入
                    $(".page2_back").fadeIn(1000,function(){
                        //文字1動畫進入
                        $(".page2_title1").animate({"width":"70%","right":"0px"},1000,function(){

                            //文字2動畫進入
                            $(".page2_title2").animate({"width":"70%","right":"0px"},1000);
                        })
                    })
                }

                //第三頁
                if(currentPage == 2){
                    $(".page3_bus").animate({"left":"-100%"},2000);
                    $(".page3_person").animate({"right":"50%"},2000);
                }
            })
        }

    })  
})

function onlight(img){
    //修改燈的圖片
    img.src = "img/lightOn.png";

    //場景1  淡出   淡出成功之後   場景2 淡入
    $(".page4_back1").fadeOut("slow");
    $(".page4_title1").fadeOut("slow");
    $(".page4_guide").fadeOut("slow",function(){
        //場景二淡入
        $(".page4_back2").fadeIn(500,function(){
            $(".page4_title2").fadeIn(500);
        })
    })
}

js：

*{
    margin: 0;
    padding: 0;
}
/*設定容器有效的定位屬性 --- 設定容器的移動*/
#container{
    position: absolute;
}

/*設定第一頁*/
.page1{
    background-color: red;
    /*設定定位屬性當做參照物*/
    position: relative;
}
/*設定背景圖*/
.page1_building{
    position: absolute;
    bottom: 0px;
    width: 100%;
    /*預設是隱藏的 -- 便於之後設計淡入的效果*/
    display: none;
}
/*設定第一頁的標題*/
.page1_title{
    position: absolute;
    height: 60%;
    top: 20%;
    left: 20%;
}
/*設定雲和其他元素*/
.page1_cloud, .page1_elements{
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    animation: zoomAnimate 2s infinite linear;
}
/*設定一個動畫: 雲和其他元素一直運動*/
@keyframes zoomAnimate{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
/* 設定小花*/
.page1_leftflower{
    position: absolute;
    left: 15%;
    top: 10%;
    animation: flowerAnimate 2s infinite linear;
}

.page1_rightflower{
    position: absolute;
    top: 10%;0%
    right: 15%;
    animation: flowerAnimate 2s infinite linear;
}
/*設定花的動畫*/
@keyframes flowerAnimate{
    0%{transform: rotate(-20deg);}
    25%{transform: rotate(0deg);}
    50%{transform: rotate(20deg);}
    75%{transform: rotate(0deg);}
    100%{transform: rotate(-20deg);}
}

/* 設定人*/
.page1_person{
    position: absolute;
    bottom: 30%;
    left: -100%;
    /*人進來之後是慢慢變大的*/
    width: 0;
    animation: zoomAnimate 2s infinite linear;
}

/*第二頁*/
.page2{
    background-color: blue;
    /*將其設定為參照物*/
    position: relative;
}

/*設定第二頁的背景圖*/
.page2_back{
    width: 100%;
    height: 100%;
    /*為了設定淡入的效果*/
    display: none;
}
.page2_title1, .page2_title2{
    position: absolute;
    right: -100%;
    width: 0px;
}

.page2_title1{
    top: 30%;
}
.page2_title2{
    top: 60%;
}

/*第三頁*/
.page3{
    background-color: orange;
    /*設定為參照物*/
    position: relative;
}
.page3_back{
    width: 100%;
    height: 100%;
}

/*凌晨 最後一班車*/
.page3_early, .page3_last{
    position: absolute;
    left: 0px;
    height: 5%;
}
.page3_early{
    top: 10%;
}
.page3_last{
    top: 17%;
}
/*設定車*/
.page3_bus{
    position: absolute;
    left: 0px;
    bottom: 10%;
    width: 50%;
}

/*
 * 設定人
 */
.page3_person{
    position: absolute;
    right: 0;
    bottom: 10%;
}

/*第四頁*/
.page4{
    background-color: yellow;
    /*設定為參照物*/
    position: relative;
}

/*場景1*/
.page4_back1{
    width: 100%;
    height: 100%;
}
/*標題*/
.page4_title1{
    position: absolute;
    right: 0px;
    top: 15%;
    width: 50%;
}
/*設定燈*/
.page4_light{
    position: absolute;
    bottom: 0px;
    left: 6%;
    height: 70%;
}
/*開燈引語*/
.page4_guide{
    width: 50%;
    position: absolute;
    left: 18%;
    top: 40%;
    animation: zoomAnimate 2s infinite linear;
}

/*場景二的樣式*/
.page4_back2{
    width: 100%;
    height: 100%;
    display: none;
}
.page4_title2{
    position: absolute;
    width: 50%;
    left: 25%;
    top: 40%;
    display: none;
}

相關文章