iT邦幫忙

2025 iThome 鐵人賽

DAY 17
2
Modern Web

關於那些有趣的 CSS 效果系列 第 17

( Day 17 ) 純 CSS 捲軸改變文字背景色

  • 分享至 

  • xImage
  •  

最近電視又播了海底總動員第二集,看到那隻章魚哥跑到哪就變色到哪,真不愧是變色界的霸主!看著牠的變色,讓我覺得如果用純 CSS,讓捲軸拖拉到哪文字就變色到哪,是否也可稱作文字變色界的霸主呢?所以就立刻做了這個效果來看看!但完全沒有霸主的感覺就是了....

純 CSS 捲軸改變文字背景色

正文開始

這篇教學會使用 CSS 的漸層色讓文字產生雙色背景,並運用背景位置、背景尺寸、自訂屬性、動畫,產生「可以改變位置」的顏色背景,最後透過 animation-timeline,讓滾動捲軸時可以改變文字背景色,凸顯重要的文字。

注意,這個效果目前僅支援 Chrome 和 Edge,其他部分瀏覽器或行動裝置瀏覽器可能不支援。

CSS 教學 - CSS 捲軸改變文字背景色

產生雙色背景

透過 CSS 的線性漸層函式 linear-gradient(),可以讓背景產生漸層色效果,如果不同顏色的位置重疊,就會產生直接切換不同顏色的效果,下方範例會替 em 元素加上紅色和黃色的雙色背景。

<!-- HTML 程式碼 -->
<div class="main">
  <h1>關於這個範例</h1>
  捲軸往下拉,可以看見凸顯文字的效果
  <h2>關於 STEAM 教育學習網</h2>
  這是一個針對 STEAM 教育所設立的網站,<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨,「自學」的趨勢也日益盛行,透過這個網站,除了紀錄我自己的學習歷程,更可以將目前正夯的新知或技術,分享給所需要的大朋友小朋友,<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
  <h2>關於這個網站的規劃 </h2>
  <em>STEAM 教育學習網目前規劃有三個階段</em>,希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 ),雖然無法做到盡善盡美,但我也會盡最大的努力去完成。
  <h2>關於我</h2> 
  大家好,我是 OXXO,是個即將邁入中年的斜槓青年。從多年的工作經驗,<em>讓我具備了 UI&UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>,近年來,我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計&創意總監」的職務後,讓我更能專注在文字、創作和學習上,<em>凡是「美、有趣、創新」的東西,都是我熱愛與追求的!</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求,都可以與我聯繫,一起來做點又酷、又好玩、又有創意的東西吧!
  <h2>CSS 教學</h2> 
  CSS 教學會透過一系列的文章和許多由淺入深的範例,<em>介紹 CSS 的相關知識,從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>,希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師,提供非常有幫助的知識內容。
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    box-sizing: border-box;
    border:1px solid #000;
    font-size: 20px;
    line-height: 2;
  }
  em {
    font-style: normal;
    background: linear-gradient(to right, #fc0 50%, #f00 50%); /* 位置重疊就不會有漸層 */
  }
</style>

CSS 教學 - CSS 捲軸改變文字背景色 - 產生文字雙色背景

移動背景方法 1、使用背景位置與尺寸

如果要移動「雙色背景的位置」,第一種方法可以使用 background-position 搭配 background-size當背景尺寸設為「200% 100%」時,表示雙色漸層中兩種顏色所佔的寬度變成「跟元素同寬」,這時候只需要改變背景水平方向的位置,就能讓雙色背景移動,下方範例會延伸原本的程式碼,加入背景位置和背景尺寸,並用動畫的方式表現移動的狀況。

<!-- HTML 程式碼 -->
<div class="main">
  <h1>關於這個範例</h1>
  捲軸往下拉,可以看見凸顯文字的效果
  <h2>關於 STEAM 教育學習網</h2>
  這是一個針對 STEAM 教育所設立的網站,<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨,「自學」的趨勢也日益盛行,透過這個網站,除了紀錄我自己的學習歷程,更可以將目前正夯的新知或技術,分享給所需要的大朋友小朋友,<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
  <h2>關於這個網站的規劃 </h2>
  <em>STEAM 教育學習網目前規劃有三個階段</em>,希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 ),雖然無法做到盡善盡美,但我也會盡最大的努力去完成。
  <h2>關於我</h2> 
  大家好,我是 OXXO,是個即將邁入中年的斜槓青年。從多年的工作經驗,<em>讓我具備了 UI&UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>,近年來,我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計&創意總監」的職務後,讓我更能專注在文字、創作和學習上,<em>凡是「美、有趣、創新」的東西,都是我熱愛與追求的!</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求,都可以與我聯繫,一起來做點又酷、又好玩、又有創意的東西吧!
  <h2>CSS 教學</h2> 
  CSS 教學會透過一系列的文章和許多由淺入深的範例,<em>介紹 CSS 的相關知識,從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>,希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師,提供非常有幫助的知識內容。
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    box-sizing: border-box;
    border:1px solid #000;
    font-size: 20px;
    line-height: 2;
  }
  em {
    font-style: normal;
    background: linear-gradient(to right, #fc0 50%, #f00 50%);
    background-size: 200% 100%;   /*  寬為元素寬度的 2 倍 */
    background-position: 100%;    /*  初始位置位於最右邊 */
    animation: oxxo linear alternate infinite 2s;  /* 動畫反覆播放無限次 */
  }
  @keyframes oxxo {
    0% {background-position: 100%;}
    100% {background-position: 0;}
  }
</style>

CSS 教學 - CSS 捲軸改變文字背景色 - 使用背景尺寸和定位,讓雙色背景移動位置

移動背景方法 2、自訂屬性

除了改變背景位置,由於背景是「漸層色」,必須使用「自訂屬性」才能要讓漸層色發生「轉場」或「動畫」,首先設定一個長度類型的自訂屬性 --x,並設定漸層色位置都讀取這個屬性,接著透過動畫的方式修改屬性內容,也可以實現雙色背景移動的效果。

<!-- HTML 程式碼 -->
<div class="main">
  <h1>關於這個範例</h1>
  捲軸往下拉,可以看見凸顯文字的效果
  <h2>關於 STEAM 教育學習網</h2>
  這是一個針對 STEAM 教育所設立的網站,<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨,「自學」的趨勢也日益盛行,透過這個網站,除了紀錄我自己的學習歷程,更可以將目前正夯的新知或技術,分享給所需要的大朋友小朋友,<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
  <h2>關於這個網站的規劃 </h2>
  <em>STEAM 教育學習網目前規劃有三個階段</em>,希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 ),雖然無法做到盡善盡美,但我也會盡最大的努力去完成。
  <h2>關於我</h2> 
  大家好,我是 OXXO,是個即將邁入中年的斜槓青年。從多年的工作經驗,<em>讓我具備了 UI&UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>,近年來,我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計&創意總監」的職務後,讓我更能專注在文字、創作和學習上,<em>凡是「美、有趣、創新」的東西,都是我熱愛與追求的!</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求,都可以與我聯繫,一起來做點又酷、又好玩、又有創意的東西吧!
  <h2>CSS 教學</h2> 
  CSS 教學會透過一系列的文章和許多由淺入深的範例,<em>介紹 CSS 的相關知識,從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>,希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師,提供非常有幫助的知識內容。
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    box-sizing: border-box;
    border:1px solid #000;
    font-size: 20px;
    line-height: 2;
  }
  /* 建立自訂屬性 */
  @property --x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  em {
    font-style: normal;
    background: linear-gradient(to right, #fc0 var(--x), #f00 var(--x)); /* 讀取自訂屬性 */
    animation: oxxo linear alternate infinite 2s;  /* 動畫反覆播放無限次 */
  }

  @keyframes oxxo {
    0% {--x: 0%;}      /* 修改自訂屬性 */
    100% {--x: 100%;}  /* 修改自訂屬性 */
  }
</style>

CSS 教學 - CSS 捲軸改變文字背景色 - 使用自訂屬性,讓雙色背景移動位置

使用 animation-timeline 動態改變文字背景色

不論上述哪種方式,只要可以用動畫的方式讓雙色背景發生移動,就可以利用 animation-timeline 控制動畫進度,實現「文字出現時,才會動態改變文字背景色」的效果,下方範例會改用 animation-timeline: view() 的方式控制動畫進度,設定距離下方 50px 時會開始動畫 0% 進度,直到最末端距離上方 100px 時為動畫 100% 進度,此外也有調整一些 CSS 細節,用 .main 產生捲軸模擬視窗。

特別注意,因為 inline 顯示類型的元素無法設定「高度」,且根據行內容器排版規則 ( IFC ),會由行框包覆所有內容,因此如果有兩個以上的行內元素需要套用改變背景色效果,會發生第一個效果完成後,後續的效果也跟著一起完成的狀況,但如果兩個行內元素中間有區塊容器分隔,就會各自獨立不會互相影響 ( 參考「CSS 元素排版方式」 )。

<!-- HTML 程式碼 -->
<div class="main">
  <h1>關於這個範例</h1>
  捲軸往下拉,可以看見凸顯文字的效果
  <h2>關於 STEAM 教育學習網</h2>
  這是一個針對 STEAM 教育所設立的網站,<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨,「自學」的趨勢也日益盛行,透過這個網站,除了紀錄我自己的學習歷程,更可以將目前正夯的新知或技術,分享給所需要的大朋友小朋友,<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
  <h2>關於這個網站的規劃 </h2>
  <em>STEAM 教育學習網目前規劃有三個階段</em>,希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 ),雖然無法做到盡善盡美,但我也會盡最大的努力去完成。
  <h2>關於我</h2> 
  大家好,我是 OXXO,是個即將邁入中年的斜槓青年。從多年的工作經驗,<em>讓我具備了 UI&UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>,近年來,我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計&創意總監」的職務後,讓我更能專注在文字、創作和學習上,<em>凡是「美、有趣、創新」的東西,都是我熱愛與追求的!</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求,都可以與我聯繫,一起來做點又酷、又好玩、又有創意的東西吧!
  <h2>CSS 教學</h2> 
  CSS 教學會透過一系列的文章和許多由淺入深的範例,<em>介紹 CSS 的相關知識,從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>,希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師,提供非常有幫助的知識內容。
</div>

<!-- CSS 程式碼 -->
<style>
  .main {
    box-sizing: border-box;
    border:1px solid #000;
    font-size: 20px;
    line-height: 2;
    width: 500px;
    height: 400px;
    overflow: hidden scroll;   /* 超出範圍隱藏,產生 y 軸捲軸 */
    padding: 100px 20px 300px; /* 讓高度高一點 */
  }
  @property --x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  em {
    font-style: normal;
    background: linear-gradient(to right, #fc0 var(--x), #f000 var(--x));
    animation: oxxo linear forwards;      /* 修改動畫,結束時停留在最後一格 */
    animation-timeline: view(100px 50px); /* 動畫進度 */
  }
  @keyframes oxxo {
    0% {--x: 0%;}
    100% {--x: 100%;}
  }
</style>

CSS 教學 - CSS 捲軸改變文字背景色 - 使用 animation-timeline 動態改變文字背景色

小結

透過使用者拖拉捲軸時才出現文字背景,會產生非常顯眼的提示效果,可以讓自己的網站內容更為吸睛,不過相對這種做法仍然會有一些跨瀏覽器的限制,建議需要搭配原本的提示效果一起實作比較妥當。


上一篇
( Day 16 ) 純 CSS 捲軸控制放射選單
下一篇
( Day 18 ) 純 CSS 顯示頁面捲動的進度條
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言