Marquee (跑馬燈)
別稱 Ticker, Infinite Scroll Text
一行內容橫向無縫地無限循環捲動。
適用情境
Logo 牆、公告列、關鍵字橫幅和新聞跑馬燈
別稱 Ticker, Infinite Scroll Text
一行內容橫向無縫地無限循環捲動。
Logo 牆、公告列、關鍵字橫幅和新聞跑馬燈
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「跑馬燈」(Marquee),也就是水平方向無限捲動的橫條,也叫 ticker。
內容由右往左以緩慢、等速的速度捲動,無縫循環,銜接處不能出現跳動。
滑鼠移上去時暫停;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止捲動。在裡面捲動
別稱 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
頁面縱向捲動時,大字級的文字列橫向滑動。
適用情境
品牌標語、主視覺區塊
在[套用位置]加入「捲動文字跑馬燈」(Text Marquee on Scroll),也叫 scroll text marquee 或 scroll velocity text。
頁面往下捲動時,大字級的文字列橫向滑動,相鄰的列朝相反方向移動;往上捲動時再滑回來。
讓移動綁定捲動位置,別讓長文字列產生水平捲軸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。點擊試試
別稱 Slider, Swipe carousel, Scroll-snap carousel
投影片在可視區域內水平移動,每次吸附一張到定位。
適用情境
首屏橫幅、商品圖庫
在[套用位置]加入「輪播滑動」(Carousel Slide),也叫滑桿 (slider) 或滑動輪播 (swipe carousel)。
每一步都讓整排橫向滑動,使下一張投影片吸附到中間,平順減速;兩側邊緣露出相鄰的投影片,位置圓點也跟著變化。
每次只移動一張,除了按鈕和方向鍵,也支援觸控滑動,並替控制項加上給螢幕閱讀器讀取的標籤。在裡面捲動
別稱 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縱向捲動時,一排被固定的面板橫向移動。
適用情境
圖庫、作品集、時間軸
在[套用位置]加入「橫向捲動區塊」(Horizontal Scroll Section),也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
區塊到達頂端時要固定住,向下捲動時讓其中的一排面板橫向移動,最後一個面板出現後再解除固定。
橫向移動要直接跟著捲動位置,往回捲動時反向移動;在小螢幕上,或如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就改成可以正常滑動的橫排。點擊試試
別稱 Isotope filter, Filterable grid animation
套用篩選或排序時,網格中的方塊重新排列、淡出或滑到新的位置。
適用情境
作品集篩選、圖庫
在[套用位置]加入「網格重排」(Masonry / Grid Shuffle) 效果,也叫可篩選網格動畫 (filterable grid animation)。
套用篩選時,不再符合的方塊在原地縮小並淡出,其餘方塊平順地滑到新位置;清除篩選時反向播放。
網格高度變化時不要讓周圍頁面跳動;篩選控制項要用真正的按鈕,並標示目前選取的是哪個篩選。別稱 Dialog open animation, Zoom-fade dialog
對話框在變暗的頁面上方,從中心稍微放大並淡入。
適用情境
確認對話框、浮層中的表單
在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫,也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時,對話框從中心稍微放大並淡入:快速、含蓄,不要回彈。
每次開啟對話框都播放一次,把焦點移進對話框並留在裡面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),只用簡單的淡入。點擊試試
別稱 Menu pop, Popover pop-in, Dropdown scale-fade
浮動選單從觸發按鈕所在的位置一邊放大一邊淡入。
適用情境
下拉選單、彈出視窗、選擇清單
在[套用位置]加入「彈出選單展開」(Popover / Dropdown Open) 動畫,也叫 menu pop 或 dropdown scale-fade。
選單從觸發按鈕旁的角落一邊微微放大一邊淡入,要快速、俐落;關閉時淡出得稍快一些。
讓選單始終貼著觸發按鈕,按 Escape 或點擊外部即可關閉,並在觸發按鈕上向螢幕閱讀器標示展開狀態。