full-page插件的使用

時間 2019-11-30

標籤 page 插件使用简体版

原文原文鏈接

1、搭建full-page環境css

一、依次下載jquery-3.0.0.min.js、jquery-ui-min.js和jquery.fullPage.jshtml

//由於full-page是基於jquery開發的，因此必需要有jquery的支持；另要設置easing參數，因此也必需要有jquery-ui的支持。jquery

2、html動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <!-- 引用full-page自帶的css文件 -->
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <!-- 引用本身設置的css動畫樣式 -->
    <link rel="stylesheet" href="css/index.css">

    <style>
        /*改進右側的導航界面，採用雪碧圖的方式*/
        #fp-nav ul li a {/*未激活的樣式*/
        float: right;
        width: 21px;
        height: 21px;
        color: #8F9DA4;
        text-decoration: none;
        text-align: right;
        background: url("images/nav-ico.png") 5px 5px no-repeat;
        }
        /*鼠標移上去激活的樣式*/
        #fp-nav ul li .active {
            background-position: 0 bottom;
        }
        
    </style>
    
    <!-- 引用js文件 -->
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>

    <!-- 啓動full-page -->
    <script>
        $(function() {
             $('#fullpage').fullpage({
            // 'verticalCentered': false,
            anchors: ['page1', 'page2', 'page3', 'page4'],
            'navigation': true,
            // 'navigationColor':'#cccccc',
            'navigationPosition': 'right',
            'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
                })
        });
    </script>

</head>
<body>
    <div id="fullpage">

        <!-- 第一畫面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page1-img.png" alt="">
            </div>
            <div class="bg11"></div><!-- 此處圖片做動畫 -->
            <div class="bg12"></div><!-- 此處圖片做動畫 -->
        </div>

        <!-- 第二畫面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page2-img.png" alt="">
            </div>
        </div>

        <!-- 第三畫面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page3-img.png" alt="">
            </div>
        </div>

    </div>
</body>
</html>

3、index.cssui

.bg11{
    position: absolute;
    width: 79px;
    height: 263px;
    left: 0;
    top:140px;
    background: url("../images/bg11.png") no-repeat;
    opacity: 0;
    transition:all 1s;
}
.active .bg11{
    left: 400px;
    opacity: 1;
    transition-delay:0.7s;
}

.bg12{
    position: absolute;
    width: 943px;
    height: 587px;
    left: 25%;
    top:-15%;
    transform:scale(0.5,0.5);
    opacity: 0;
    background: url("../images/bg12.png") no-repeat;
    transition:all 1s;
}

.active .bg12{
    opacity: 1;
    transform:scale(1,1);
    transition-delay:.7s;
}

4、雪碧圖背景圖片url

相關標籤/搜索