構(gòu)與方法 API 詳解)
fullPage.js Parallax 擴展使用指南視差背景的配置、HTML 結(jié)構(gòu)與方法 API 詳解【免費下載鏈接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple項目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js本指南以 fullPage.js 官方文檔中關(guān)于 Parallax視差擴展的說明為核心系統(tǒng)講解如何通過fp-bg元素為全屏 Section / Slide 打造隨滾動產(chǎn)生位移差的背景層效果涵蓋必需的 HTML 結(jié)構(gòu)、背景應(yīng)用方式、parallax與parallaxOptions配置項、以及setOption/init/destroy方法 API并輔以當(dāng)前倉庫源碼默認配置、類型定義、擴展激活說明進行佐證。讀者閱讀后可獨立完成 Parallax 擴展的激活、頁面改造、參數(shù)調(diào)優(yōu)與動態(tài)啟停。一、擴展激活使用 Parallax 前的前置準備Parallax 屬于 fullPage.js 的官方擴展Extension并非內(nèi)置功能使用前必須完成激活。完整流程見倉庫內(nèi)文檔 lang/japanese/how-to-activate-fullpage-extension.md要點如下訪問官方激活頁面購買擴展后郵件中會提供該 URL輸入購買時獲得的許可證密鑰License Key按提示填寫域名生成對應(yīng)域名的激活密鑰Activation Key。激活密鑰與許可證密鑰是兩類不同的密鑰切勿混淆許可證密鑰用于生成激活密鑰格式為 4 組 8 字符如XXXXXXXXXXXX-XXXXXXXXXXXXXX-XXXXXXXXXXXX-XXXXXXXXXXXX激活密鑰則綁定到特定域名長度可變且不分組。初始化 fullPage.js 時以擴展名 Key的形式傳入激活密鑰new fullPage(#fullpage, { parallax: true, parallaxKey: ここにアクティベーションキーを入力, // 填入你的激活密鑰 });必須在頁面中引入fullpage.extensions.min.js擴展版構(gòu)建文件而非普通的fullpage.js。當(dāng)前倉庫源碼 src/js/common/constants.js 中維護了包括parallax在內(nèi)的一組擴展名列表用于校驗傳入的parallaxKey等擴展選項是否合法。開發(fā)便利性說明localhost與127.0.0.1不需要激活密鑰即可在本地開發(fā)調(diào)試線上域名則需要專業(yè)版或商業(yè)版許可證多域名許可證可傳入密鑰數(shù)組例如parallaxKey: [domain1_key, domain2_key, domain3_key]。二、必需的 HTML 結(jié)構(gòu)在 Section / Slide 中插入fp-bg元素要在 Section 或 Slide 上啟用視差背景必須先在 DOM 中新增一個帶fp-bg類的空div元素并且它必須是該 Section / Slide 的第一個子元素div classfp-bg/div背景樣式只能應(yīng)用到這個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 擴展的官方演示入口頁面中直接跳轉(zhuǎn)到擴展在線演示站點可查看其源碼結(jié)構(gòu)。備選方案如果因為布局原因?qū)嵲跓o法新增元素可將parallaxOptions中的property選項設(shè)置為background直接對當(dāng)前 Section / Slide 的背景屬性施加視差效果。但官方明確提示該方式性能不如fp-bg元素方案僅在確有需要時才建議使用。三、背景的施加方法背景通過 CSS 或內(nèi)聯(lián)樣式施加在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使用以保證不同屏幕比例下背景鋪滿且構(gòu)圖穩(wěn)定。你也可以直接使用倉庫 examples/imgs 下的背景圖如bg1.jpg、bg2.jpg等進行本地聯(lián)調(diào)。四、配置選項parallax與parallaxOptionsParallax 擴展涉及兩個頂層配置項其默認值在 src/js/optionsDefault.js 中定義parallax: false, parallaxOptions: { type: reveal, percentage: 62, property: translate },選項類型 / 默認值說明parallaxfalse默認是否在 Section / Slide 上啟用視差背景效果?？蛇x值為false、true、sections、slides其中sections表示僅豎向 Section 生效slides表示僅橫向 Slide 生效。parallaxOptions{ type: reveal, percentage: 62, property: translate }設(shè)置parallax: true時視差背景效果的具體參數(shù)詳見下文。4.1parallaxOptions子選項詳解子選項類型 / 默認值說明typereveal默認取值cover或reveal決定當(dāng)前 Section/Slide 與目標(biāo) Section/Slide 之間的層疊關(guān)系cover使下一個 Section/Slide 覆蓋當(dāng)前頁面的一部分reveal則反轉(zhuǎn)效果讓當(dāng)前頁面覆蓋目標(biāo)頁面的一部分。percentage62默認視差效果相對視口viewport的百分比。值越小視差幅度越小設(shè)為 100最大值時背景完全靜止等同于關(guān)閉視差位移。propertytranslate默認取值translate或background決定視差效果施加在fp-bg元素上還是直接施加到 Section / Slide 的background屬性上。官方建議使用默認值。與之對應(yīng)的 TypeScript 類型定義見 types/index.d.tstype ParallaxOptions { percentage?: number property?: translate | background type?: reveal | cover };從類型定義可以確認property僅接受translate | background兩個取值type僅接受reveal | cover與文檔描述一一對應(yīng)。4.2 性能要點為何默認使用translate使用fp-bg元素時視差位移通過translate3d實現(xiàn)可以充分利用 GPU 硬件加速因此性能更好。property: background選項的定位是兜底方案——當(dāng)頁面無法修改 HTML 標(biāo)記、無法為每個 Section/Slide 插入fp-bg元素時使用但由于直接操作背景屬性無法利用硬件加速性能會明顯劣化。4.3 兼容性限制根據(jù) README.md 中的說明parallax選項不兼容以下場景fp-auto-height自動高度SectionoffsetSections偏移 Section擴展dragAndMove拖拽移動擴展。在同一頁面中同時啟用這些功能與parallax時需要評估沖突可能導(dǎo)致的顯示異常。五、方法 API運行時動態(tài)控制視差Parallax 擴展通過fullpage_api.parallax暴露三個方法可用于在頁面運行時動態(tài)調(diào)整視差行為。5.1setOption(optionName, value)設(shè)置parallaxOptions中某個子選項的值。optionName取值限定為type、percentage或property。// 將 type 屬性改為 cover fullpage_api.parallax.setOption(type, cover); // 將 percentage 屬性改為 30 fullpage_api.parallax.setOption(percentage, 30);注意示例中percentage以字符串30傳入實現(xiàn)層會將其轉(zhuǎn)換為數(shù)值參與百分比計算實際使用時可傳數(shù)字或數(shù)字字符串。5.2init()啟用視差效果。當(dāng)頁面需要在特定時機而非初始化時動態(tài)開啟視差時使用fullpage_api.parallax.init();5.3destroy()關(guān)閉視差效果fullpage_api.parallax.destroy();六、完整配置示例將以上內(nèi)容整合一份可落地的初始化配置如下new fullPage(#fullpage, { // 啟用 Parallax 擴展也可設(shè)為 sections 或 slides 限定作用范圍 parallax: true, // 擴展激活密鑰 parallaxKey: ここにアクティベーションキーを入力, // 視差參數(shù)調(diào)優(yōu) 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%; }即可在保留全屏翻頁體驗的同時讓背景層以不同的位移速率產(chǎn)生立體縱深感。七、總結(jié)Parallax 擴展為 fullPage.js 提供了一套開箱即用的視差背景方案核心是“把背景抽離到fp-bg元素上”通過parallax開關(guān)與parallaxOptions三件套type/percentage/property控制位移方向、幅度與實現(xiàn)方式再配合setOption/init/destroy三個方法在運行時動態(tài)調(diào)整。實際開發(fā)中應(yīng)優(yōu)先采用默認的translate方案以享受 GPU 加速僅在無法改動 HTML 結(jié)構(gòu)時才降級為background屬性方案同時注意避開fp-auto-height、offsetSections、dragAndMove等不兼容組合。相關(guān)源碼入口見 src/js/optionsDefault.js、types/index.d.ts 與 src/js/common/constants.js?！久赓M下載鏈接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple項目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 fullPage.js Parallax 擴展使用指南：視差背景的配置、HTML 結(jié)構(gòu)與方法 API 詳解
fullPage.js Parallax 擴展使用指南視差背景的配置、HTML 結(jié)構(gòu)與方法 API 詳解【免費下載鏈接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple項目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js本指南以 fullPage.js 官方文檔中關(guān)于 Parallax視差擴展的說明為核心系統(tǒng)講解如何通過fp-bg元素為全屏 Section / Slide 打造隨滾動產(chǎn)生位移差的背景層效果涵蓋必需的 HTML 結(jié)構(gòu)、背景應(yīng)用方式、parallax與parallaxOptions配置項、以及setOption/init/destroy方法 API并輔以當(dāng)前倉庫源碼默認配置、類型定義、擴展激活說明進行佐證。讀者閱讀后可獨立完成 Parallax 擴展的激活、頁面改造、參數(shù)調(diào)優(yōu)與動態(tài)啟停。一、擴展激活使用 Parallax 前的前置準備Parallax 屬于 fullPage.js 的官方擴展Extension并非內(nèi)置功能使用前必須完成激活。完整流程見倉庫內(nèi)文檔 lang/japanese/how-to-activate-fullpage-extension.md要點如下訪問官方激活頁面購買擴展后郵件中會提供該 URL輸入購買時獲得的許可證密鑰License Key按提示填寫域名生成對應(yīng)域名的激活密鑰Activation Key。激活密鑰與許可證密鑰是兩類不同的密鑰切勿混淆許可證密鑰用于生成激活密鑰格式為 4 組 8 字符如XXXXXXXXXXXX-XXXXXXXXXXXXXX-XXXXXXXXXXXX-XXXXXXXXXXXX激活密鑰則綁定到特定域名長度可變且不分組。初始化 fullPage.js 時以擴展名 Key的形式傳入激活密鑰new fullPage(#fullpage, { parallax: true, parallaxKey: ここにアクティベーションキーを入力, // 填入你的激活密鑰 });必須在頁面中引入fullpage.extensions.min.js擴展版構(gòu)建文件而非普通的fullpage.js。當(dāng)前倉庫源碼 src/js/common/constants.js 中維護了包括parallax在內(nèi)的一組擴展名列表用于校驗傳入的parallaxKey等擴展選項是否合法。開發(fā)便利性說明localhost與127.0.0.1不需要激活密鑰即可在本地開發(fā)調(diào)試線上域名則需要專業(yè)版或商業(yè)版許可證多域名許可證可傳入密鑰數(shù)組例如parallaxKey: [domain1_key, domain2_key, domain3_key]。二、必需的 HTML 結(jié)構(gòu)在 Section / Slide 中插入fp-bg元素要在 Section 或 Slide 上啟用視差背景必須先在 DOM 中新增一個帶fp-bg類的空div元素并且它必須是該 Section / Slide 的第一個子元素div classfp-bg/div背景樣式只能應(yīng)用到這個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 擴展的官方演示入口頁面中直接跳轉(zhuǎn)到擴展在線演示站點可查看其源碼結(jié)構(gòu)。備選方案如果因為布局原因?qū)嵲跓o法新增元素可將parallaxOptions中的property選項設(shè)置為background直接對當(dāng)前 Section / Slide 的背景屬性施加視差效果。但官方明確提示該方式性能不如fp-bg元素方案僅在確有需要時才建議使用。三、背景的施加方法背景通過 CSS 或內(nèi)聯(lián)樣式施加在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使用以保證不同屏幕比例下背景鋪滿且構(gòu)圖穩(wěn)定。你也可以直接使用倉庫 examples/imgs 下的背景圖如bg1.jpg、bg2.jpg等進行本地聯(lián)調(diào)。四、配置選項parallax與parallaxOptionsParallax 擴展涉及兩個頂層配置項其默認值在 src/js/optionsDefault.js 中定義parallax: false, parallaxOptions: { type: reveal, percentage: 62, property: translate },選項類型 / 默認值說明parallaxfalse默認是否在 Section / Slide 上啟用視差背景效果?？蛇x值為false、true、sections、slides其中sections表示僅豎向 Section 生效slides表示僅橫向 Slide 生效。parallaxOptions{ type: reveal, percentage: 62, property: translate }設(shè)置parallax: true時視差背景效果的具體參數(shù)詳見下文。4.1parallaxOptions子選項詳解子選項類型 / 默認值說明typereveal默認取值cover或reveal決定當(dāng)前 Section/Slide 與目標(biāo) Section/Slide 之間的層疊關(guān)系cover使下一個 Section/Slide 覆蓋當(dāng)前頁面的一部分reveal則反轉(zhuǎn)效果讓當(dāng)前頁面覆蓋目標(biāo)頁面的一部分。percentage62默認視差效果相對視口viewport的百分比。值越小視差幅度越小設(shè)為 100最大值時背景完全靜止等同于關(guān)閉視差位移。propertytranslate默認取值translate或background決定視差效果施加在fp-bg元素上還是直接施加到 Section / Slide 的background屬性上。官方建議使用默認值。與之對應(yīng)的 TypeScript 類型定義見 types/index.d.tstype ParallaxOptions { percentage?: number property?: translate | background type?: reveal | cover };從類型定義可以確認property僅接受translate | background兩個取值type僅接受reveal | cover與文檔描述一一對應(yīng)。4.2 性能要點為何默認使用translate使用fp-bg元素時視差位移通過translate3d實現(xiàn)可以充分利用 GPU 硬件加速因此性能更好。property: background選項的定位是兜底方案——當(dāng)頁面無法修改 HTML 標(biāo)記、無法為每個 Section/Slide 插入fp-bg元素時使用但由于直接操作背景屬性無法利用硬件加速性能會明顯劣化。4.3 兼容性限制根據(jù) README.md 中的說明parallax選項不兼容以下場景fp-auto-height自動高度SectionoffsetSections偏移 Section擴展dragAndMove拖拽移動擴展。在同一頁面中同時啟用這些功能與parallax時需要評估沖突可能導(dǎo)致的顯示異常。五、方法 API運行時動態(tài)控制視差Parallax 擴展通過fullpage_api.parallax暴露三個方法可用于在頁面運行時動態(tài)調(diào)整視差行為。5.1setOption(optionName, value)設(shè)置parallaxOptions中某個子選項的值。optionName取值限定為type、percentage或property。// 將 type 屬性改為 cover fullpage_api.parallax.setOption(type, cover); // 將 percentage 屬性改為 30 fullpage_api.parallax.setOption(percentage, 30);注意示例中percentage以字符串30傳入實現(xiàn)層會將其轉(zhuǎn)換為數(shù)值參與百分比計算實際使用時可傳數(shù)字或數(shù)字字符串。5.2init()啟用視差效果。當(dāng)頁面需要在特定時機而非初始化時動態(tài)開啟視差時使用fullpage_api.parallax.init();5.3destroy()關(guān)閉視差效果fullpage_api.parallax.destroy();六、完整配置示例將以上內(nèi)容整合一份可落地的初始化配置如下new fullPage(#fullpage, { // 啟用 Parallax 擴展也可設(shè)為 sections 或 slides 限定作用范圍 parallax: true, // 擴展激活密鑰 parallaxKey: ここにアクティベーションキーを入力, // 視差參數(shù)調(diào)優(yōu) 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%; }即可在保留全屏翻頁體驗的同時讓背景層以不同的位移速率產(chǎn)生立體縱深感。七、總結(jié)Parallax 擴展為 fullPage.js 提供了一套開箱即用的視差背景方案核心是“把背景抽離到fp-bg元素上”通過parallax開關(guān)與parallaxOptions三件套type/percentage/property控制位移方向、幅度與實現(xiàn)方式再配合setOption/init/destroy三個方法在運行時動態(tài)調(diào)整。實際開發(fā)中應(yīng)優(yōu)先采用默認的translate方案以享受 GPU 加速僅在無法改動 HTML 結(jié)構(gòu)時才降級為background屬性方案同時注意避開fp-auto-height、offsetSections、dragAndMove等不兼容組合。相關(guān)源碼入口見 src/js/optionsDefault.js、types/index.d.ts 與 src/js/common/constants.js?！久赓M下載鏈接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple項目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考