Skip to main content
HashnodeEva Chen | 網頁設計師下班後

Command Palette

Search for a command to run...

#scroll-animation

Articles tagged with #scroll-animation

  1. #70 純 CSS 也能做滾動動畫了！animation-timeline 讓東西邊滾邊動

    ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 你一定看過那種很酷的網頁：當你向下滾動時，背景圖片移動得比前景文字慢，或者某個元素會隨著滾動淡入、旋轉、放大，創造出引人入勝的深度和故事感。 這種效果，我們稱之為「捲動式動畫 (Scroll-driven Animations)」或「視差滾動 (Parallax Scrolling)」。 為了寫這篇，我發現了一個超實用的網站！ 這個網站 Scroll-driven Animations 收集了許多由滾動驅動...

    Sep 21, 20251 min read198
    #70 純 CSS 也能做滾動動畫了！animation-timeline 讓東西邊滾邊動

  2. #65 CSS 簡易的滑順捲軸滾動動畫 scroll-behavior

    ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 前幾篇我們已經學會怎麼設定 CSS 的滾動範圍，現在我們要再對滾動的操作行為做一些很簡單的設定，就是：滾動時的行為 scroll-behavior 。 一、使用 HTML hash # 連結（錨點），滾動到指定 HTML ID 範圍 1. hash 錨點的設定 在 CSS 中指定 ID 時是使用井字號代表，在 HTML 中其實也是一樣的，我們可以使用 <a> 連結連到這個 ID，點了連結後就會在同個畫面中跳...

    Sep 16, 20251 min read49
    #65 CSS 簡易的滑順捲軸滾動動畫 scroll-behavior
#scroll-animation - Eva Chen | 網頁設計師下班後