主頁
WIX服務介紹
WIX進階服務方案
WIX教學
活動及課程
Blog
WIXHK討論區
聯絡我們
More
請問如何scroll down 時,頁首可以由一個置中大的頁首漸變為條狀頁首?
example: https://www.beholdgel.hk/?locale=en
謝謝回覆,我跟著步驟做,但也完成不了,如下圖,請問如何解決?
我其實之前也有看過這教學,但一樣不成功。
請截圖一下編輯模式代碼的部分,要看到行數的 還有,網站其實可以加入多國語言app,請查看討論區分類
可以啊。但必需使用開發模式,我們參考了這個教學。 簡單說一下做法:
如上圖一樣,但必需使用兩條帶狀圖片,一條是縮小了的,我們叫它做scrollingHeaderStrip,可以增加欄位把公司小型logo及選單固定在左右兩邊的位置。
另外,大/正常的那一條我們叫它做defaultHeaderStrip,是有完整公司商標在正中間。請把兩條帶狀圖片於Properties Panel更改名稱,並把小的那條設定為"Hidden"。
設定一條透明的帶狀圖片,我們叫它做headerTransitionPoint,把它縮成很小及放在螢幕交接之間,並設定為"在所有網頁上顯示"。設定後,檢查一下會不會在其他頁面上遮蓋了一些重要資訊,例如按鈕,有需要可調整一下。
把頁首設定為"凍結",並把兩條帶狀圖片"固定於頁首"。
開啟開發模式,打開Code Panel,右下角"open masterPage.js"。這是用於每一頁都會載入的程式碼。
輸入以下代碼:
$w.onReady(function () { //網頁完成下載時 $w("#headerTransitionPoint").onViewportLeave(() => { //物件離開視線範圍時 let fadeOptions = { //執行淡出效果 "duration": 1000, //執行時長1秒 "delay": 200, //延遲執行0.2秒 }; $w("#scrollingHeaderStrip").show("fade", fadeOptions); //物件出現 $w("#defaultHeaderStrip").hide("fade", fadeOptions); //物件消失 }) $w("#headerTransitionPoint").onViewportEnter(() => { //物件進入視線範圍時 let fadeOptions = { //執行淡出效果 "duration": 1000, //執行時長1秒 "delay": 200, //延遲執行0.2秒 }; $w("#scrollingHeaderStrip").hide("fade", fadeOptions); //物件消失 $w("#defaultHeaderStrip").show("fade", fadeOptions); //物件出現 })
如果不需要淡出效果"fade",可以把黃色Hightlight的部份刪除,或者,要好玩創新一點,不妨把所有的"fade"字改為以下任何一種動畫效果:
"arc" Arc-In
"bounce" - Bounce-In
"fade" - Fade-In
"flip" - Flip-In
"float" - Float-In
"fly" - Fly-In
"fold" - Fold-In
"glide" - Glide-In
"puff" - Puff-In
"roll" - Reveal
"slide" - Slide-In
"spin" - Spin-In
"turn" - Turn-In
"zoom" - Expand-In
#製作會縮小的頁首
#WixShrinkingHeader
謝謝回覆,我跟著步驟做,但也完成不了,如下圖,請問如何解決?
我其實之前也有看過這教學,但一樣不成功。
可以啊。但必需使用開發模式,我們參考了這個教學。 簡單說一下做法:
如上圖一樣,但必需使用兩條帶狀圖片,一條是縮小了的,我們叫它做scrollingHeaderStrip,可以增加欄位把公司小型logo及選單固定在左右兩邊的位置。
另外,大/正常的那一條我們叫它做defaultHeaderStrip,是有完整公司商標在正中間。請把兩條帶狀圖片於Properties Panel更改名稱,並把小的那條設定為"Hidden"。
設定一條透明的帶狀圖片,我們叫它做headerTransitionPoint,把它縮成很小及放在螢幕交接之間,並設定為"在所有網頁上顯示"。設定後,檢查一下會不會在其他頁面上遮蓋了一些重要資訊,例如按鈕,有需要可調整一下。
把頁首設定為"凍結",並把兩條帶狀圖片"固定於頁首"。
開啟開發模式,打開Code Panel,右下角"open masterPage.js"。這是用於每一頁都會載入的程式碼。
輸入以下代碼:
$w.onReady(function () { //網頁完成下載時 $w("#headerTransitionPoint").onViewportLeave(() => { //物件離開視線範圍時 let fadeOptions = { //執行淡出效果 "duration": 1000, //執行時長1秒 "delay": 200, //延遲執行0.2秒 }; $w("#scrollingHeaderStrip").show("fade", fadeOptions); //物件出現 $w("#defaultHeaderStrip").hide("fade", fadeOptions); //物件消失 }) $w("#headerTransitionPoint").onViewportEnter(() => { //物件進入視線範圍時 let fadeOptions = { //執行淡出效果 "duration": 1000, //執行時長1秒 "delay": 200, //延遲執行0.2秒 }; $w("#scrollingHeaderStrip").hide("fade", fadeOptions); //物件消失 $w("#defaultHeaderStrip").show("fade", fadeOptions); //物件出現 })
如果不需要淡出效果"fade",可以把黃色Hightlight的部份刪除,或者,要好玩創新一點,不妨把所有的"fade"字改為以下任何一種動畫效果:
"arc" Arc-In
"bounce" - Bounce-In
"fade" - Fade-In
"flip" - Flip-In
"float" - Float-In
"fly" - Fly-In
"fold" - Fold-In
"glide" - Glide-In
"puff" - Puff-In
"roll" - Reveal
"slide" - Slide-In
"spin" - Spin-In
"turn" - Turn-In
"zoom" - Expand-In
#製作會縮小的頁首
#WixShrinkingHeader