提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「捲動隱藏頁首」(Hide on Scroll Header),也叫 headroom 或自動隱藏導覽列 (auto-hide navbar)。
使用者向下捲動時,頁首要向上滑出畫面;只要向上捲動,就滑回來:快速、流暢,依捲動方向而不是距離來反應。
在頁面最上方時一律顯示,忽略細微的捲動抖動,並且當頁首內有元素取得鍵盤焦點時保持顯示。相似的動效
在裡面捲動
Sticky Header Shrink (固定頁首縮小)
別稱 Shrinking Header, Shrink on Scroll
使用者往下捲動後,固定頁首的高度或尺寸會縮小。
適用情境
導覽列
在[套用位置]加入「固定頁首縮小」(Sticky Header Shrink),也叫 shrinking header 或 shrink on scroll。
頁首固定在頂端,讀者稍微往下捲動後,平順地縮成更窄的橫條、Logo 也變小;回到頂端時再恢復原狀。
頁首尺寸變化時,不要讓下方內容跳動。A
Slide Out (滑出)
別稱 Slide Out Up, Slide Out Down
元素滑出容器邊緣後消失。
適用情境
關閉抽屜和面板
在[套用位置]加入「滑出」(Slide Out) 退場動畫,也叫 slide out up 或 slide out down。
元素保持完全不透明,滑出容器邊緣後消失:快速,離開時加速。
在容器邊緣處裁切,離開畫面後對鍵盤和螢幕閱讀器也隱藏;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即隱藏。A
Slide In (滑入)
別稱 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素從容器邊緣之外滑入到停靠位置,不帶淡入效果。
適用情境
抽屜、側邊面板、橫幅
在[套用位置]加入「滑入」(Slide In) 進場動畫,也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置,全程保持完全不透明:快速,平順減速,不要回彈。
在容器邊緣處裁切,避免它在外面時蓋住相鄰元素或產生捲軸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接在原位顯示。Scroll 中的其他動效
A
B
C
D
E
在裡面捲動
Horizontal Scroll Section (橫向捲動區塊)
別稱 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縱向捲動時,一排被固定的面板橫向移動。
適用情境
圖庫、作品集、時間軸
在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section),也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住,向下捲動時讓其中的一排面板橫向移動,最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置,往回捲動時反向移動;在小螢幕上,或如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就改成可以正常滑動的橫排。A
B
C
D
在裡面捲動
Parallax (視差捲動)
別稱 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
捲動時各圖層以不同速度移動,營造出景深感。
適用情境
主視覺背景、登陸頁
在[套用位置]加入「視差捲動」(Parallax) 效果,也叫 parallax scrolling 或視差圖層 (parallax layers)。
頁面捲動時,背景圖層要比內容移動得慢,越遠的圖層移動越少,營造含蓄的景深感。
讓效果緊跟捲動位置、沒有延遲,文字放在正常速度的圖層上;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉這個效果。ABC
A
B
C
在裡面捲動
Pinning (捲動釘選)
別稱 Pinned Section, Sticky Section, Scroll Pin
在一段捲動範圍內,元素固定在原位,其他內容或動畫繼續推進。
適用情境
捲動驅動的敘事、功能展示
在[套用位置]加入「捲動釘選」(Pinning) 效果,也叫釘選區塊 (pinned section) 或 sticky section。
旁邊的內容隨捲動經過時,一個面板要固定在原位,並隨正在閱讀的步驟切換內容,區塊結束時再解除固定。
優先使用原生的 sticky 定位,而不是攔截捲動;並確保在小螢幕上即使沒有固定面板,每個步驟也依然好讀。