iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 25

Day 25:入場動畫 & 捲動揭示

  • 分享至 

  • xImage
  •  

目標:使用 IntersectionObserver 做卡片入場動畫(已在 app.js 內建,這天微調節奏)。
檔案js/app.jsstyle.css
步驟

1. 在 observeCards() 調整 threshold 與延遲,讓卡片分批進場。

2. 新增 .is-in 的動畫曲線(ease-out、350ms)。

3. 為「已選標籤區」新增小小 fade-in。

驗收:往下捲動時卡片一排排滑入,回捲不會重複爆量觸發。
進階:實作「減少動效」支援:

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

上一篇
Day 24:卡片層次 & 玻璃質感
下一篇
Day 26:表單 UX 打磨
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言