Web Motion Atlas / 網頁動態圖鑑

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
捲動時間軸 / Timeline on scroll
隨捲動延伸線條，依序顯示重要節點。
適用場合: 沿革、製作流程、導入步驟
scroll + transform
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
捲動文字顯現 / Scroll text reveal
隨閱讀位置改變文字顏色，逐步呈現句子。
適用場合: 簡短訊息與品牌介紹
scroll + opacity
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
堆疊卡片 / Stacking cards
下一張卡片由下方疊上，前一張向後退。
適用場合: 服務介紹與系列案例
scroll + transform
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
背景色切換 / Background color change
依照閱讀位置改變背景配色。
適用場合: 章節分界與主題轉換
scroll + background-color
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
捲動隱藏頁首 / Hide-on-scroll header
向下閱讀時隱藏導覽，向上返回時重新顯示。
適用場合: 長篇文章與手機導覽
scroll direction + transform
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
捲動監測導覽 / Scrollspy
目錄的選取狀態與目前閱讀的區段同步。
適用場合: 長篇說明與產品規格
scroll position + aria-current
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
回到頂端按鈕 / Back to top
向下閱讀後顯示按鈕，按下可返回開頭。
適用場合: 長列表與文章重新探索
scrollTo + focus
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。

請以HTML、CSS與JavaScript實作以下效果。
捲動縮放 / Scroll zoom
放大場景，拉近觀看主體。
適用場合: 產品細節與主視覺
scroll + scale
保留內容與閱讀順序，不攔截正常捲動。減少動態時顯示完整狀態。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
3D傾斜 / 3D tilt
卡片隨游標位置產生立體傾斜。
適用場合: 作品卡片與產品展示
pointermove + perspective
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
聚光燈懸停 / Spotlight hover
光線跟隨游標，照亮卡片邊緣。
適用場合: 功能選擇與項目聚焦
radial-gradient + Pointer Events
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
懸停切換圖片 / Image swap on hover
懸停或點按可顯示商品的其他顏色或角度。
適用場合: 色彩款式與正反面比較
opacity + :focus-visible
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
文字滾動 / Text roll
文字向上移出，下一段文字從下方出現。
適用場合: 簡短連結與選單
overflow + translateY
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
懸停圖片預覽 / Hover image preview
觸碰列表項目，即顯示該地點的圖片。
適用場合: 作品列表與旅遊地點比較
pointermove + focus
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
浮動標籤 / Floating label
輸入時標籤上移，持續顯示欄位名稱。
適用場合: 聯絡與報名表單
label + :placeholder-shown
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
行內驗證 / Inline validation
在欄位旁顯示錯誤與修正結果。
適用場合: 電子郵件格式檢查
ValidityState + aria-invalid
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。

請以HTML、CSS與JavaScript實作以下效果。
載入按鈕 / Loading button
顯示處理與完成狀態，防止重複操作。
適用場合: 儲存或送出後的回饋
disabled + aria-busy
不要只依賴懸停，觸控與鍵盤也要能取得相同內容。表單範例僅在本機執行，不會傳送。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
檢視轉場 / View transition
保留同一張圖片，從卡片連續轉到詳細畫面。
適用場合: 列表與詳情之間的移動
document.startViewTransition
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
燈箱 / Lightbox
放大開啟圖片，關閉後返回原來的位置。
適用場合: 照片、作品與圖表放大
dialog.showModal + close
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
熱點 / Hotspots
點選圖上的標記，展開該部位的說明。
適用場合: 產品構造與設施導覽
button + aria-expanded
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
倒數計時 / Countdown timer
顯示距離期限的時間，歸零後停止。
適用場合: 截止期限與活動開始
performance.now + timeout
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
動態造型分隔線 / Animated shape divider
以移動的波浪連接上下區段。
適用場合: 主視覺下緣與章節分界
SVG path + transform
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
按讚動畫 / Like animation
按下後愛心彈動，並改變選取狀態。
適用場合: 收藏與儲存回饋
aria-pressed + Web Animations
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
向下捲動提示 / Scroll cue
向下的動作提示後續內容，點選即可前往。
適用場合: 從首屏引導至內文
scrollIntoView + focus
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。

採用前須知 保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。

請以HTML、CSS與JavaScript實作以下效果。
背景影片 / Background video
在可閱讀的前景文字後方播放影片。
適用場合: 旅遊、空間與品牌介紹
video + muted + playsinline
保留內容的可達性，提供暫停或關閉方式。不支援效果時仍應能閱讀內容。
請符合上述對象、觸發與變化，支援320px、鍵盤及prefers-reduced-motion，保留閱讀順序與焦點。