Repolode
提交项目
alvarotrigo

alvarotrigo/fullPage.js

用于构建全屏滚动网站的 JavaScript 库，支持分段页面与横向幻灯片。

在 GitHub 查看官网
Star
35,360
Fork
7,061
未关闭 Issue
137
最近提交
2个月前

这是什么？

fullPage.js 用于制作单页式全屏滚动网站，每个分段占满整个视口，用户可通过鼠标滚轮、触摸滑动、键盘或导航圆点切换。分段内还可以放置横向滑块，并支持为分段和幻灯片设置锚点链接，同时可将菜单与当前激活的分段联动。

使用时只需在一个包裹元素上调用一次初始化，并通过配置项调整滚动速度、缓动效果、循环滚动、媒体懒加载，以及在低于设定宽高时回退为普通滚动。onLeave、afterLoad 等回调可用于监听切换过程。库可以直接用原生 JavaScript 调用，也可作为 jQuery 插件使用，并提供 Vue、React、Angular 版本。

部分高级效果（如 cinematic、视差、幻灯片特效、拖拽移动）以扩展形式提供，需要许可证密钥。核心库采用 GPL-3.0 协议，也提供商业授权选项。

核心功能

  • 01分段全屏显示，通过滚动、滑动或键盘切换并自动对齐视口。
  • 02分段内可嵌套横向滑块。
  • 03支持分段与幻灯片的锚点链接，并记录浏览器历史。
  • 04菜单与导航圆点可随当前分段高亮。
  • 05图片、视频、音频懒加载，嵌入媒体支持自动播放与离开时暂停。
  • 06低于设定宽度或高度时回退为普通滚动。

适用场景

  • 制作全屏分段的单页营销或产品落地页。
  • 打造按段落逐步推进的叙事型页面。
  • 在滚动页面中加入幻灯片式的内容面板。
  • 在 WordPress 或 Vue、React、Angular 项目中通过对应封装使用。

快速上手

  1. 1

    通过 npm 安装 fullPage.js

    npm install fullpage.js
  2. 2

    在 HTML 页面中引入 CSS 和 JavaScript 文件

  3. 3

    在包裹元素上初始化 fullPage.js

使用前须知

  • 采用 GPL-3.0 许可证，闭源项目使用需要单独购买商业许可证。
  • 在闭源站点或应用中商用需要向项目方购买商业许可。

标签

#javascript#fullscreen#scrolling#slider#single-page#animation#frontend-library#fullpage#jquery#mousewheel

常见问题

fullPage.js 是什么？
用于构建全屏滚动网站的 JavaScript 库，支持分段页面与横向幻灯片。 fullPage.js 用于制作单页式全屏滚动网站，每个分段占满整个视口，用户可通过鼠标滚轮、触摸滑动、键盘或导航圆点切换。分段内还可以放置横向滑块，并支持为分段和幻灯片设置锚点链接，同时可将菜单与当前激活的分段联动。
fullPage.js 可以免费使用吗？用的什么许可证？
fullPage.js 以 GPL-3.0 许可证开源。用于商业产品前，请先确认许可证条款。
fullPage.js 还在维护吗？
半年内有更新。fullPage.js 最近一次提交是在 2026年9月20日。
fullPage.js 适合用来做什么？
制作全屏分段的单页营销或产品落地页。 打造按段落逐步推进的叙事型页面。 在滚动页面中加入幻灯片式的内容面板。 在 WordPress 或 Vue、React、Angular 项目中通过对应封装使用。
fullPage.js 怎么安装和运行？
通过 npm 安装 fullPage.js: npm install fullpage.js 在 HTML 页面中引入 CSS 和 JavaScript 文件 在包裹元素上初始化 fullPage.js
在哪里获取 fullPage.js？
源代码和安装说明在 GitHub 上：https://github.com/alvarotrigo/fullPage.js

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目