fullPage.js Parallax 扩展使用指南：视差背景的配置、HTML 结构与方法 API 详解

fullPage.js Parallax 扩展使用指南视差背景的配置、HTML 结构与方法 API 详解【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js本指南以 fullPage.js 官方文档中关于 Parallax视差扩展的说明为核心系统讲解如何通过fp-bg元素为全屏 Section / Slide 打造随滚动产生位移差的背景层效果涵盖必需的 HTML 结构、背景应用方式、parallax与parallaxOptions配置项、以及setOption/init/destroy方法 API并辅以当前仓库源码默认配置、类型定义、扩展激活说明进行佐证。读者阅读后可独立完成 Parallax 扩展的激活、页面改造、参数调优与动态启停。一、扩展激活使用 Parallax 前的前置准备Parallax 属于 fullPage.js 的官方扩展Extension并非内置功能使用前必须完成激活。完整流程见仓库内文档 lang/japanese/how-to-activate-fullpage-extension.md要点如下访问官方激活页面购买扩展后邮件中会提供该 URL输入购买时获得的许可证密钥License Key按提示填写域名生成对应域名的激活密钥Activation Key。激活密钥与许可证密钥是两类不同的密钥切勿混淆许可证密钥用于生成激活密钥格式为 4 组 8 字符如XXXXXXXXXXXX-XXXXXXXXXXXXXX-XXXXXXXXXXXX-XXXXXXXXXXXX激活密钥则绑定到特定域名长度可变且不分组。初始化 fullPage.js 时以扩展名 Key的形式传入激活密钥new fullPage(#fullpage, { parallax: true, parallaxKey: ここにアクティベーションキーを入力, // 填入你的激活密钥 });必须在页面中引入fullpage.extensions.min.js扩展版构建文件而非普通的fullpage.js。当前仓库源码 src/js/common/constants.js 中维护了包括parallax在内的一组扩展名列表用于校验传入的parallaxKey等扩展选项是否合法。开发便利性说明localhost与127.0.0.1不需要激活密钥即可在本地开发调试线上域名则需要专业版或商业版许可证多域名许可证可传入密钥数组例如parallaxKey: [domain1_key, domain2_key, domain3_key]。二、必需的 HTML 结构在 Section / Slide 中插入fp-bg元素要在 Section 或 Slide 上启用视差背景必须先在 DOM 中新增一个带fp-bg类的空div元素并且它必须是该 Section / Slide 的第一个子元素div classfp-bg/div背景样式只能应用到这个fp-bg元素上而不能直接施加给 Section / Slide 本身。以下是一个同时覆盖竖向 Section 与横向 Slide 的完整示例div idfullpage div classsection idsection1 div classfp-bg/div スライド 1.1 /div div classsection idsection2 div classslide idslide2-1 div classfp-bg/div スライド 2.1 /div div classslide idslide2-2 div classfp-bg/div スライド 2.2 /div /div /div仓库中的 examples/parallax.html 即为 Parallax 扩展的官方演示入口页面中直接跳转到扩展在线演示站点可查看其源码结构。备选方案如果因为布局原因实在无法新增元素可将parallaxOptions中的property选项设置为background直接对当前 Section / Slide 的背景属性施加视差效果。但官方明确提示该方式性能不如fp-bg元素方案仅在确有需要时才建议使用。三、背景的施加方法背景通过 CSS 或内联样式施加在fp-bg元素上写法与普通元素背景完全一致。例如#section1 .fp-bg{ background-image: url(imgs/alvaro-genious.jpg); background-size: cover; background-position: center 80%; }由于fp-bg是独立的层推荐配合background-size: cover与合理的background-position使用以保证不同屏幕比例下背景铺满且构图稳定。你也可以直接使用仓库 examples/imgs 下的背景图如bg1.jpg、bg2.jpg等进行本地联调。四、配置选项parallax与parallaxOptionsParallax 扩展涉及两个顶层配置项其默认值在 src/js/optionsDefault.js 中定义parallax: false, parallaxOptions: { type: reveal, percentage: 62, property: translate },选项类型 / 默认值说明parallaxfalse默认是否在 Section / Slide 上启用视差背景效果。可选值为false、true、sections、slides其中sections表示仅竖向 Section 生效slides表示仅横向 Slide 生效。parallaxOptions{ type: reveal, percentage: 62, property: translate }设置parallax: true时视差背景效果的具体参数详见下文。4.1parallaxOptions子选项详解子选项类型 / 默认值说明typereveal默认取值cover或reveal决定当前 Section/Slide 与目标 Section/Slide 之间的层叠关系cover使下一个 Section/Slide 覆盖当前页面的一部分reveal则反转效果让当前页面覆盖目标页面的一部分。percentage62默认视差效果相对视口viewport的百分比。值越小视差幅度越小设为 100最大值时背景完全静止等同于关闭视差位移。propertytranslate默认取值translate或background决定视差效果施加在fp-bg元素上还是直接施加到 Section / Slide 的background属性上。官方建议使用默认值。与之对应的 TypeScript 类型定义见 types/index.d.tstype ParallaxOptions { percentage?: number property?: translate | background type?: reveal | cover };从类型定义可以确认property仅接受translate | background两个取值type仅接受reveal | cover与文档描述一一对应。4.2 性能要点为何默认使用translate使用fp-bg元素时视差位移通过translate3d实现可以充分利用 GPU 硬件加速因此性能更好。property: background选项的定位是兜底方案——当页面无法修改 HTML 标记、无法为每个 Section/Slide 插入fp-bg元素时使用但由于直接操作背景属性无法利用硬件加速性能会明显劣化。4.3 兼容性限制根据 README.md 中的说明parallax选项不兼容以下场景fp-auto-height自动高度SectionoffsetSections偏移 Section扩展dragAndMove拖拽移动扩展。在同一页面中同时启用这些功能与parallax时需要评估冲突可能导致的显示异常。五、方法 API运行时动态控制视差Parallax 扩展通过fullpage_api.parallax暴露三个方法可用于在页面运行时动态调整视差行为。5.1setOption(optionName, value)设置parallaxOptions中某个子选项的值。optionName取值限定为type、percentage或property。// 将 type 属性改为 cover fullpage_api.parallax.setOption(type, cover); // 将 percentage 属性改为 30 fullpage_api.parallax.setOption(percentage, 30);注意示例中percentage以字符串30传入实现层会将其转换为数值参与百分比计算实际使用时可传数字或数字字符串。5.2init()启用视差效果。当页面需要在特定时机而非初始化时动态开启视差时使用fullpage_api.parallax.init();5.3destroy()关闭视差效果fullpage_api.parallax.destroy();六、完整配置示例将以上内容整合一份可落地的初始化配置如下new fullPage(#fullpage, { // 启用 Parallax 扩展也可设为 sections 或 slides 限定作用范围 parallax: true, // 扩展激活密钥 parallaxKey: ここにアクティベーションキーを入力, // 视差参数调优 parallaxOptions: { type: cover, // reveal | cover percentage: 62, // 0 ~ 100越小视差越明显 property: translate // translate | background }, });配合 CSS#section1 .fp-bg{ background-image: url(imgs/bg1.jpg); background-size: cover; background-position: center 80%; }即可在保留全屏翻页体验的同时让背景层以不同的位移速率产生立体纵深感。七、总结Parallax 扩展为 fullPage.js 提供了一套开箱即用的视差背景方案核心是“把背景抽离到fp-bg元素上”通过parallax开关与parallaxOptions三件套type/percentage/property控制位移方向、幅度与实现方式再配合setOption/init/destroy三个方法在运行时动态调整。实际开发中应优先采用默认的translate方案以享受 GPU 加速仅在无法改动 HTML 结构时才降级为background属性方案同时注意避开fp-auto-height、offsetSections、dragAndMove等不兼容组合。相关源码入口见 src/js/optionsDefault.js、types/index.d.ts 与 src/js/common/constants.js。【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考