当前位置：首页 > article >正文

前端页面整屏滚动fullpage.js简单使用

article 2024/11/5 16:17:29

官网CSS,JS地址

fullPage.js/dist/fullpage.min.js at master · alvarotrigo/fullPage.js · GitHub

fullPage.js/dist/fullpage.min.css at master · alvarotrigo/fullPage.js · GitHub

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #fullpage .section {
        text-align: center;
        font-size: 2em;
        color: white;
    }

    #fullpage .section:nth-child(1) { background-color: #3498db; }
    #fullpage .section:nth-child(2) { background-color: #e74c3c; }
    #fullpage .section:nth-child(3) { background-color: #2ecc71; }
    #fullpage .section:nth-child(4) { background-color: pink; }
</style>
<body>
    <div id="fullpage">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">第三屏</div>
        <div class="section fp-auto-height">第四屏 fp-auto-height自定义高度</div>
    </div>

    <link rel="stylesheet" href="./fullpage.min.css">
    <script src="./fullpage.min.js"></script>
    <script>

        var myFullpage = new fullpage('#fullpage', {
            navigation: true, // 显示导航点
            slidesNavigation: true, // 如果有横向滑动的面板，显示横向导航
            scrollingSpeed: 1000, // 滚动速度，单位为毫秒
            easing: 'easeInOutCubic', // 滚动动画的速度曲线
            css3: true // 使用 CSS3 transforms 进行滚动
        });

    </script>
</body>

</html>

效果图: