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

效果图:

相关推荐
Code季风几秒前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾几秒前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿2 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸2 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic3 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮4 分钟前
vite打包的简单配置
前端
Codebee4 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝4 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
知了一笑7 分钟前
独立开发问题记录-margin塌陷
前端
OEC小胖胖8 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web