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

效果图:

相关推荐
why技术1 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
tkevinjd15 分钟前
C++中线程库的基本操作
开发语言·c++
CodeWithMe24 分钟前
【C/C++】不同防止头文件重复包含的措施
c语言·开发语言·c++
拉不动的猪37 分钟前
JQ常规面试题
前端·javascript·面试
子豪-中国机器人38 分钟前
C++ 信息学奥赛总复习题答案解析
开发语言·c++·算法
海上彼尚38 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
oioihoii1 小时前
C++11列表初始化:从入门到精通
java·开发语言·c++
zdy12635746881 小时前
python第48天打卡
开发语言·python
whoarethenext1 小时前
使用 C++/OpenCV 创建动态流星雨特效 (实时动画)
开发语言·c++·opencv
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app