提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「視差捲動」(Parallax) 效果,也叫 parallax scrolling 或視差圖層 (parallax layers)。
頁面捲動時,背景圖層要比內容移動得慢,越遠的圖層移動越少,營造含蓄的景深感。
讓效果緊跟捲動位置、沒有延遲,文字放在正常速度的圖層上;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉這個效果。相似的動效
A
在裡面捲動
Scroll-Linked Animation (捲動連動動畫)
別稱 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
動畫進度直接綁定捲動位置,往下捲動時播放,往回捲動時倒轉。
適用情境
敘事型頁面、進度效果
在[套用位置]加入「捲動連動動畫」(Scroll-Linked Animation),也叫 scroll-driven animation 或 scroll scrub。
動畫要緊跟著捲動位置:往下捲動時正向播放,往上捲動時當場倒轉,本身不帶以時間為基礎的緩動。
把整段動畫對應到一個明確的捲動範圍;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就顯示一個合理的靜態狀態。A
在裡面捲動
Zoom on Scroll (捲動縮放)
別稱 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
隨著使用者捲動,元素或場景放大或縮小。
適用情境
主視覺開場、圖片放大展開
在[套用位置]加入「捲動縮放」(Zoom on Scroll) 效果,也叫 scroll zoom 或 scale on scroll。
區塊停留在畫面中時,元素要隨著捲動從一張小卡片平順放大,直到佔滿整個畫面;往上捲動時再縮回去。
縮放時不要推擠周圍的版面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接以最終尺寸顯示,不做縮放。Ken Burns Effect (肯·伯恩斯效果)
別稱 Slow pan and zoom, Ken Burns, Kenburns
靜態圖片在框內緩慢縮放並平移。
適用情境
主視覺輪播、背景
在[套用位置]加入「肯·伯恩斯效果」(Ken Burns Effect),也叫 slow pan and zoom。
每張圖片顯示時只朝一個方向非常緩慢地縮放、漂移,然後交叉淡入到下一張,下一張朝另一個方向移動:平靜而連續。
讓每張圖片在任何時刻都填滿整個框,絕不露出邊緣;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),讓圖片保持靜止。Scroll 中的其他動效
ABC
A
B
C
在裡面捲動
Pinning (捲動釘選)
別稱 Pinned Section, Sticky Section, Scroll Pin
在一段捲動範圍內,元素固定在原位,其他內容或動畫繼續推進。
適用情境
捲動驅動的敘事、功能展示
在[套用位置]加入「捲動釘選」(Pinning) 效果,也叫釘選區塊 (pinned section) 或 sticky section。
旁邊的內容隨捲動經過時,一個面板要固定在原位,並隨正在閱讀的步驟切換內容,區塊結束時再解除固定。
優先使用原生的 sticky 定位,而不是攔截捲動;並確保在小螢幕上即使沒有固定面板,每個步驟也依然好讀。在裡面捲動
Scroll Progress Indicator (捲動進度指示器)
別稱 Reading Progress Bar, Progress Bar
隨著使用者捲動頁面或文章,進度條或圓環逐漸填滿。
適用情境
文章、長頁面
在[套用位置]加入「捲動進度指示器」(Scroll Progress Indicator),也叫閱讀進度條 (reading progress bar)。
頂端的一條細條要隨著讀者捲動的距離從左往右填滿,到結尾時佔滿整個寬度。
直接綁定捲動位置,不要有緩動延遲,也不要遮住內容。A
B
C
D
在裡面捲動
Scroll Snap (捲動吸附)
別稱 Scroll Snapping, Snap Scrolling
捲動停止時會吸附到預設的位置,例如投影片或區塊。
適用情境
輪播、全螢幕區塊、圖庫
在[套用位置]加入「捲動吸附」(Scroll Snap),也叫 scroll snapping 或 snap scrolling。
捲動停下時,畫面要俐落地吸附到最近的區塊,讓每個區塊都對齊邊緣,而不是停在一半。
使用瀏覽器原生的吸附功能,讓滑鼠滾輪、觸控和鍵盤捲動都照常運作,並確保比畫面更高的內容也能完整閱讀。