fullPage.js 视差扩展Parallax Extension完整实战指南fp-bg 背景元素、parallaxOptions 配置与运行时 API【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js导读本文基于本仓库中 lang/brazilian-portuguese/parallax-extension.md以及 中文版整理而成系统讲解 fullPage.js 视差扩展从 HTML 结构、背景样式到parallax/parallaxOptions参数配置、再到setOption、init、destroy运行时方法的完整用法。视差扩展是 fullPage.js 的官方商业扩展之一见 src/js/common/constants.js 中列出的扩展清单它让 section / slide 的背景以不同速度移动产生多层景深效果。读完本文你将能独立搭建一个带视差背景的全屏滚动站点并根据reveal/cover、percentage、property等参数精准控制效果强弱与叠加方式。一、使用前提扩展文件的引入与激活视差parallax并非 fullPage.js 核心包内置功能而是列于 src/js/common/constants.js 的扩展之一。在 lang/brazilian-portuguese/README.md 中说明了所有扩展共用的引入方式需要使用扩展专用版本fullpage.extensions.min.js位于dist目录而不是普通的fullpage.js/fullpage.min.js每个扩展都需要对应的激活密钥与许可证密钥具体流程见 lang/brazilian-portuguese/how-to-activate-fullpage-extension.md引入顺序为先引入扩展文件再引入fullpage.extensions.min.js。仓库根目录的 package.json 中并未把视差扩展打包进核心发行版这也印证了它属于独立的商业扩展体系需要在购买或申请许可证后配合激活密钥使用。二、必需的 HTML 结构为 section / slide 添加fp-bg元素要在 section 或 slide 上启用视差效果必须在每个需要效果的容器内第一个子元素位置放置一个空的div并赋予fp-bg类div classfp-bg/div背景图片施加在这个fp-bg元素上而不是直接施加在所属的 section / slide 上。例如div idfullpage div classsection idsection1 div classfp-bg/div Slide 1.1 /div div classsection idsection2 div classslide idslide2-1 div classfp-bg/div Slide 2.1 /div div classslide idslide2-2 div classfp-bg/div Slide 2.2 /div /div /div从上述结构可以看到section 有自己独立的fp-bg其内部的每个 slide 也可以各自拥有一个fp-bg从而让纵向滚动与横向滑动都能获得独立的视差背景层。如果出于某些原因确实不想在页面结构中新增fp-bg元素例如无法修改 HTML 模板可以借助parallaxOptions.property选项将其设为background让视差效果直接作用于 section / slide 自身的背景属性。但正如后文“视差效果选项”一节所述只有确有必要才建议这样做——使用fp-bg时的性能会明显更好。本仓库 examples/parallax.html 即视差扩展的演示入口页面当前内容为重定向到官方演示站可作为结构参考。三、应用背景图片CSS 与内联样式两种方式背景需要应用在fp-bg元素上方式与平时给 section / slide 设置背景完全一致可以使用外部 CSS也可以使用内联style属性。例如#section1 .fp-bg{ background-image: url(imgs/alvaro-genious.jpg); background-size: cover; background-position: center 80%; }关键点在于background-size: cover与background-position的组合由于视差移动会让背景相对容器产生位移使用cover并配合合适的background-position如上例的center 80%可以保证背景铺满且构图不跑偏。仓库示例目录 examples/imgs 中提供了多张 1800x1125 的背景图片如 bg1.jpg、bg2.jpg 等可直接用于测试视差效果。四、选项Optionsparallax与parallaxOptions视差相关的顶层选项共两个其默认值可在源码 src/js/optionsDefault.js 中得到印证选项说明parallax默认falsefullPage.js 扩展选项决定是否在 section / slide 上使用视差背景效果。可选值为false、true、sections、slides。其中sections表示仅在纵向 section 上启用、slides表示仅在横向 slide 上启用、true表示两者都启用parallaxOptions默认{ type: reveal, percentage: 62, property: translate }当parallax: true时用于配置视差背景效果的具体参数源码 src/js/optionsDefault.js 中的默认实现为parallax: false, parallaxOptions: { type: reveal, percentage: 62, property: translate },初始化示例new fullpage(#fullpage, { parallax: true, parallaxOptions: { type: reveal, percentage: 62, property: translate } });五、视差效果选项parallaxOptions详解parallaxOptions中可配置三个子选项parallaxOptions 子选项说明type默认reveal可选值为cover与reveal决定当前 section/slide 与目标 section/slide 的上下叠加关系。使用cover时目标下一屏会盖住当前屏的一部分使用reveal则效果相反当前屏会盖住目标屏出现时的一部分percentage默认62定义视差效果相对视口viewport的百分比。数值越小背景移动幅度越小、视差感越弱最大值100时背景完全静止property决定视差效果作用于fp-bg元素translate还是直接作用于 section/slide 的背景属性background。官方建议保持默认值translate关于性能官方文档特别强调使用fp-bg元素能获得更好、更流畅的性能因为其内部基于translate3d走 GPU 硬件加速而background模式是为“不想新增fp-bg元素”或“无法修改 HTML 标记”的场景提供的备选方案。这一点也与 fullPage.js 整体的过渡实现思路一致——本仓库核心滚动逻辑大量依赖 transform 变换参见 src/js/scroll/scrollPage.js 等相关实现transform 路径在现代浏览器中通常比背景重绘更高效。六、方法Methods运行时控制视差效果视差扩展通过fullpage_api.parallax暴露三个运行时方法可在页面加载后动态操作视差行为setOption(optionName, value)为指定的parallaxOptions子选项设置新值。optionName可以是type、percentage或property中的任意一个// 改变 type 属性的值 fullpage_api.parallax.setOption(type, cover); // 改变 percentage 属性的值 fullpage_api.parallax.setOption(percentage, 30);典型场景根据用户交互如切换主题、进入某个特殊章节动态改变视差强弱或叠加方向。init()启用视差效果适用于需要在某个特定时间点动态开启视差的场景fullpage_api.parallax.init();destroy()关闭视差效果fullpage_api.parallax.destroy();以上三个方法与fullpage_api实例绑定要求页面已经用正确的初始化方式创建了 fullPage 实例。组合使用示例进入某章节时init()开启视差、setOption(percentage, 30)调弱幅度离开后destroy()关闭。七、快速上手完整示例与常见问题将上述内容整合为一个最小可运行的配置div idfullpage div classsection idsection1 div classfp-bg/div h1视差背景示例/h1 /div div classsection idsection2 div classfp-bg/div h1第二屏/h1 /div /div#section1 .fp-bg{ background-image: url(imgs/bg1.jpg); background-size: cover; background-position: center 80%; } #section2 .fp-bg{ background-image: url(imgs/bg2.jpg); background-size: cover; background-position: center center; }new fullpage(#fullpage, { autoScrolling: true, parallax: true, parallaxOptions: { type: reveal, percentage: 62, property: translate } });常见问题排查视差不生效首先确认使用的是fullpage.extensions.min.js扩展版本且parallax值不是false其次检查每个 section/slide 是否都放入了fp-bg作为第一个子元素背景出现跳动或错位确认fp-bg的background-size与background-position已正确设置并检查percentage是否过大100 表示完全静止需要横向滑动视差将parallax设为slides或true并确保每个.slide内也包含独立的fp-bg。八、延伸阅读关联文档原稿lang/brazilian-portuguese/parallax-extension.md、lang/chinese/parallax-extensionmd.md扩展激活与许可证lang/brazilian-portuguese/how-to-activate-fullpage-extension.md完整选项文档含 parallax 选项说明lang/brazilian-portuguese/README.md默认参数源码src/js/optionsDefault.js扩展清单源码src/js/common/constants.js演示页面examples/parallax.html可直接用于测试的背景图examples/imgs/bg1.jpg 等【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考