前端页面整屏滚动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>

效果图:

相关推荐
web守墓人38 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋42 分钟前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L44 分钟前
CSS知识复习5
前端·css
许白掰44 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
ruan1145142 小时前
MySQL4种隔离级别
java·开发语言·mysql
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
百锦再7 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖