提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「捲動吸附」(Scroll Snap),也叫 scroll snapping 或 snap scrolling。
捲動停下時,畫面要俐落地吸附到最近的區塊,讓每個區塊都對齊邊緣,而不是停在一半。
使用瀏覽器原生的吸附功能,讓滑鼠滾輪、觸控和鍵盤捲動都照常運作,並確保比畫面更高的內容也能完整閱讀。相似的動效
點擊試試
Carousel Slide (輪播滑動)
別稱 Slider, Swipe carousel, Scroll-snap carousel
投影片在可視區域內水平移動,每次吸附一張到定位。
適用情境
首屏橫幅、商品圖庫
在[套用位置]加入「輪播滑動」(Carousel Slide),也叫滑桿 (slider) 或滑動輪播 (swipe carousel)。
每一步都讓整排橫向滑動,使下一張投影片吸附到中間,平順減速;兩側邊緣露出相鄰的投影片,位置圓點也跟著變化。
每次只移動一張,除了按鈕和方向鍵,也支援觸控滑動,並替控制項加上給螢幕閱讀器讀取的標籤。在裡面捲動
Smooth Scroll (平滑捲動)
別稱 Smooth Scrolling, Inertia Scroll
捲動和錨點跳轉帶有緩動地平滑滑動,而不是生硬地跳動。
適用情境
錨點導覽、追求質感的頁面
在[套用位置]加入「平滑捲動」(Smooth Scroll),也叫 smooth scrolling 或慣性捲動 (inertia scroll)。
捲動和錨點跳轉要順暢地滑動並緩緩停下,而不是一格一格地跳;手感要輕快靈敏,不要沉重拖泥帶水。
保留鍵盤捲動、捲軸、頁面內搜尋等原生行為;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉平滑效果。在裡面捲動
Horizontal Scroll Section (橫向捲動區塊)
別稱 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縱向捲動時,一排被固定的面板橫向移動。
適用情境
圖庫、作品集、時間軸
在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section),也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住,向下捲動時讓其中的一排面板橫向移動,最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置,往回捲動時反向移動;在小螢幕上,或如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就改成可以正常滑動的橫排。在裡面捲動
Stacking Cards (堆疊卡片)
別稱 Sticky Stacking Cards, Card Stack Scroll
捲動時卡片固定在頂端並層層疊起,先前的卡片通常會稍微縮小。
適用情境
功能列表、作品集
在[套用位置]加入「堆疊卡片」(Stacking Cards),也叫 sticky stacking cards 或 card stack scroll。
捲動時,每張卡片固定在頂端附近,下一張卡片從下方滑上來蓋住它,底下的卡片稍微縮小,疊成整齊的一疊。
讓每張先前的卡片露出一道細邊,並給最後一張卡片留足空間,讓它在區塊結束前滑到定位。Scroll 中的其他動效
在裡面捲動
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),就顯示一個合理的靜態狀態。在裡面捲動
Scroll-Triggered Animation (捲動觸發動畫)
別稱 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
元素進入或離開可視區域時,動畫播放一次。
適用情境
淡入區塊、延遲顯現
在[套用位置]加入「捲動觸發動畫」(Scroll-Triggered Animation),也叫捲動顯現 (reveal on scroll) 或 animate on scroll。
每個元素進入畫面時只播放一次:淡入並往上滑到定位,用自己快速流暢的節奏播放,而不是跟著捲動位置。
腳本載入失敗時內容也要看得到;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示元素。