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

官网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

html 复制代码
<!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>

效果图:

相关推荐
Yang-Never1 小时前
Kotlin协程 -> Job.join() 完整流程图与核心源码分析
android·开发语言·kotlin·android studio
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
TomCode先生3 小时前
c#动态树形表达式详解
开发语言·c#
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
高-老师3 小时前
基于R语言的物种气候生态位动态量化与分布特征模拟
开发语言·r语言·物种气候
大翻哥哥4 小时前
Python 2025:量化金融与智能交易的新纪元
开发语言·python·金融
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr