滾動(dòng)驅(qū)動(dòng)的動(dòng)畫很棒！它們是一個(gè)強(qiáng)大的工具，可以使開發(fā)人員將元素的運(yùn)動(dòng)和轉(zhuǎn)換直接與用戶的滾動(dòng)位置聯(lián)繫起來。這項(xiàng)技術(shù)開闢了創(chuàng)建交互式體驗(yàn)，提示圖像的新方法，在舞臺(tái)上滑行文字以及背景以巧妙的轉(zhuǎn)移。若有所思地使用，捲軸驅(qū)動(dòng)的動(dòng)畫（SDA）可以使您的網(wǎng)站感覺更加動(dòng)態(tài)，引人入勝和響應(yīng)能力。

幾週前，我正在玩滾動(dòng)驅(qū)動(dòng)的動(dòng)畫，只是在尋找各種隨機(jī)的事情。那時(shí)，我想出了動(dòng)畫主題文本（H1）的想法，並使用SDA根據(jù)用戶在頁面上的用戶滾動(dòng)位置更改標(biāo)題本身。在本文中，我們將分解這個(gè)想法，並逐步重建它。這是我們將要進(jìn)入的一般方向，在全屏中看起來更好，並在鉻瀏覽器中查看：

重要的是要注意，此示例中的效果僅在支持滾動(dòng)驅(qū)動(dòng)動(dòng)畫的瀏覽器中起作用。在不支持SDA的地方，靜態(tài)標(biāo)題有適當(dāng)?shù)尼醾?。從可訪問性的角度來看，如果瀏覽器啟用了運(yùn)動(dòng)啟用運(yùn)動(dòng)，或者使用輔助技術(shù)訪問頁面，則效果將被禁用，並且用戶以完全語義且易於訪問的方式獲取所有內(nèi)容。

只是一個(gè)快速注意：這種方法確實(shí)依賴於關(guān)鍵框架的一些“魔術(shù)數(shù)字”，稍後我們將討論。儘管它們響應(yīng)迅速，但這種方法確實(shí)最適合靜態(tài)內(nèi)容，並且對(duì)於高度動(dòng)態(tài)的網(wǎng)站來說並不理想。

仔細(xì)觀察動(dòng)畫

在我們深入研究捲軸驅(qū)動(dòng)動(dòng)畫之前，讓我們花一分鐘的時(shí)間查看文本動(dòng)畫本身以及它的實(shí)際工作方式。這是基於我?guī)啄昵跋雱?chuàng)建打字機(jī)效應(yīng)的想法。當(dāng)時(shí)，我發(fā)現(xiàn)的大多數(shù)方法都涉及對(duì)元素的寬度進(jìn)行動(dòng)畫，使用單拼字體或純色背景。這些都不對(duì)我有用。因此，我尋找一種使內(nèi)容本身動(dòng)畫的方法，而解決方案通常是偽元素。

偽元素具有內(nèi)容屬性，您可以（某種）動(dòng)畫該文本。這不是完全動(dòng)畫，但是您可以動(dòng)態(tài)地更改內(nèi)容。很酷的部分是，唯一變化的是文本本身，無需其他技巧。

從堅(jiān)實(shí)的基礎(chǔ)開始

現(xiàn)在，您知道了文本動(dòng)畫背後的技巧，讓我們看看如何將其與捲軸驅(qū)動(dòng)的動(dòng)畫相結(jié)合，並確保我們也有堅(jiān)實(shí)，易於訪問的後備。

我們將從一些基本的語義標(biāo)記開始。我將所有內(nèi)容都包裹在主要元素中，其中包含各個(gè)部分。每個(gè)部分都有自己的標(biāo)題和內(nèi)容，例如文本和圖像。在此示例中，我設(shè)置了四個(gè)部分，每個(gè)部分都帶有一些文本和一些圖像，all ol siftiral of原色。

<main>
  <section>
    <h1>原色</h1>
    <p>三種原色（紅色，藍(lán)色和黃色）構(gòu)成了色輪上所有其他顏色的基礎(chǔ)。以不同的組合混合它們會(huì)產(chǎn)生各種色調(diào)。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="滾動(dòng)驅(qū)動(dòng)的粘性標(biāo)題">
  </section>
  
  <section>
    <h2>紅力</h2>
    <p>紅色是一種大膽而鮮豔的色彩，象徵著能量，激情和溫暖。它很容易吸引註意力，並且通常與強(qiáng)烈的情緒聯(lián)繫在一起。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="滾動(dòng)驅(qū)動(dòng)的粘性標(biāo)題">
  </section>
  
  <section>
    <h2>藍(lán)色平靜</h2>
    <p>藍(lán)色是一種平靜而涼爽的色彩，代表寧靜，穩(wěn)定和信任。它喚起了天空和海洋的圖像，創(chuàng)造了一種寧靜的心情。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="滾動(dòng)驅(qū)動(dòng)的粘性標(biāo)題">
  </section>
  
  <section>
    <h2>黃色的喜悅</h2>
    <p>黃色是一種明亮而開朗的顏色，依靠光線，樂觀和創(chuàng)造力。這是非常明顯的，帶來了幸福和希望的感覺。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="滾動(dòng)驅(qū)動(dòng)的粘性標(biāo)題">
  </section>
</main>

至於樣式，我在此階段沒有做任何特別的事情，只是基礎(chǔ)知識(shí)。我更改了字體，調(diào)整了文本和標(biāo)題大小，設(shè)置了主和部分的顯示屏，並用對(duì)象擬合修復(fù)了圖像大小。

因此，在這一點(diǎn)上，我們有一個(gè)簡單的網(wǎng)站，具有靜態(tài)，語義和可訪問的內(nèi)容，這很棒?，F(xiàn)在，目標(biāo)是確保在我們開始添加效果時(shí)保持這種方式。

第二個(gè)第一個(gè)標(biāo)題

首先，將在主頂部添加另一個(gè)H1元素。這個(gè)新元素將作為我們動(dòng)畫文本的佔(zhàn)位符，並根據(jù)用戶的滾動(dòng)位置進(jìn)行更新。是的，我知道第一部分中已經(jīng)有H1。很好，我們會(huì)稍後解決，以便一次只能訪問一個(gè)。

<h1 aria-hidden="true">原色</h1>

請(qǐng)注意，我已經(jīng)在此標(biāo)題中添加了Aria-Hidden =“ True”，因此屏幕閱讀器不會(huì)撿起它?，F(xiàn)在，我可以在所有其他標(biāo)題中添加專門為屏幕閱讀器的課程。這樣，任何“正?！辈榭磧?nèi)容的人都只會(huì)看到動(dòng)畫標(biāo)題，而輔助技術(shù)用戶將獲得常規(guī)的靜態(tài)語義標(biāo)題。

注意： .Sronly類的樣式基於Scott O'Hara的“包容性隱藏”。

處理支持

儘管可訪問性很重要，但我們需要牢記另一個(gè)問題：支持。 CSS捲軸驅(qū)動(dòng)的動(dòng)畫很棒，但是到處都沒有得到完全支持。這就是為什麼為不支持SDA的瀏覽器提供靜態(tài)版本很重要的原因。

第一步是隱藏我們剛剛使用Display添加的動(dòng)畫標(biāo)題：無。然後，我們將添加一個(gè)新的@supports塊，以檢查SDA支持。在支持SDA的該塊內(nèi)部，我們可以更改標(biāo)題的顯示屏。

.Sronly類也應(yīng)進(jìn)入@supports塊，因?yàn)槲覀冎幌Ｍ谛Ч庫痘顒?dòng)狀態(tài)時(shí)將其應(yīng)用，而不是在不支持時(shí)應(yīng)用。這樣，就像使用輔助技術(shù)一樣，任何人在沒有SDA支持的情況下訪問頁面的任何人仍然可以獲得靜態(tài)內(nèi)容。

 。
  顯示：無；
}

@supports（animation-timeline：scroll（））{
  。
    顯示：塊;
  }
  
  / *僅屏幕讀取器 */
  .sronly {
    剪輯：rect（0 0 0 0）; 
    剪輯路徑：插圖（50％）；
    身高：1px;
    溢出：隱藏；
    位置：絕對(duì)；
    白色空間：nowrap; 
    寬度：1px;
  }
}

變得粘

我們需要做的下一個(gè)事情是處理標(biāo)題的粘性。為了確保標(biāo)題始終留在屏幕上，我們將其位置設(shè)置為粘貼的頂部：0，以便將其粘在視口的頂部。

當(dāng)我們使用它的同時(shí)，讓我們添加一些基本樣式，包括背景，以便文本與標(biāo)題背後的任何內(nèi)容，輔助間距和白色空間的填充：Nowrap：將標(biāo)題保持在一條線上。

 / * @supports塊內(nèi)部 */
。
  顯示：塊;
  位置：粘性；
  頂部：0;
  背景圖像：線性學(xué)位（0DEG，透明，黑色1EM）;
  填充：0.5EM 0.25EM;
  白色空間：nowrap;
}

現(xiàn)在一切都設(shè)置了：在正常情況下，我們將在頁面頂部看到一個(gè)粘性標(biāo)題。而且，如果有人使用輔助技術(shù)或不支持SDA的瀏覽器，他們?nèi)匀粫?huì)得到常規(guī)的靜態(tài)內(nèi)容。

現(xiàn)在，我們準(zhǔn)備開始對(duì)文本進(jìn)行動(dòng)畫動(dòng)畫。幾乎…

神奇的數(shù)字

要構(gòu)建文本動(dòng)畫，我們需要確切知道文本應(yīng)在哪裡更改。使用SDA，滾動(dòng)基本上成為我們的時(shí)間表，我們必須確定該時(shí)間軸上的確切點(diǎn)才能觸發(fā)動(dòng)畫。

為了使這更容易，並幫助您確定這些職位，我已經(jīng)準(zhǔn)備了以下腳本：

 @property -scroll-position {
  文法:"<number> ”
  繼承：false;
  初始值：0;
}

身體:: efter {
  計(jì)數(shù)器：SP var（ - 滾動(dòng)位置）;
  內(nèi)容：計(jì)數(shù)器（SP）“％”；
  位置：固定；
  頂部：0;
  左：0;
  填充：1EM；
  背景色：栗色；
  動(dòng)畫：捲軸步驟（100）;
  動(dòng)畫臺(tái)式：scroll（）;
}

@keyframes scrollPosition {
  0％{ -  croll-position：0; }
  100％{ -  croll-position：100; }
}</number>

我不想深入此代碼，但是想法是根據(jù)滾動(dòng)進(jìn)度將其用於動(dòng)畫文本的相同滾動(dòng)時(shí)間表來動(dòng)畫文本，並使用它來對(duì)自定義屬性（-scroll-loction）進(jìn)行動(dòng)畫化，並根據(jù)滾動(dòng)進(jìn)度從0到100進(jìn)行動(dòng)畫，並在內(nèi)容中顯示該值。

如果我們?cè)诖a開始時(shí)添加此內(nèi)容，我們將在屏幕的左上角看到一個(gè)小紅色正方形，顯示當(dāng)前的滾動(dòng)位置為百分比（以匹配密鑰幀）。這樣，您可以滾動(dòng)到所需的任何部分，並輕鬆標(biāo)記每個(gè)標(biāo)題應(yīng)開始的百分比。

通過這種方法和一些反複試驗(yàn)，我發(fā)現(xiàn)我希望標(biāo)題以30％，60％和90％的變化。那麼，我們實(shí)際上是怎麼做的呢？讓我們開始動(dòng)畫。

動(dòng)畫文字

首先，我們將清除.scrollivenhead元素內(nèi)的內(nèi)容，因此它是空的，可以準(zhǔn)備動(dòng)態(tài)內(nèi)容。在CSS中，我將在標(biāo)題中添加一個(gè)偽元素，我們將使用該元素來對(duì)文本進(jìn)行動(dòng)畫。我們將其提供空的內(nèi)容，設(shè)置動(dòng)畫名稱，當(dāng)然，將動(dòng)畫速度分配給scroll（）。

而且，由於我正在為Content屬性（是一個(gè)離散類型）動(dòng)畫，因此在值之間不會(huì)順利過渡。它只是從一個(gè)跳到另一個(gè)。通過將動(dòng)畫定時(shí)功能屬性設(shè)置為步長，我確保每個(gè)更改都會(huì)完全按照我定義的密鑰幀進(jìn)行，因此文本正好切換我想要的位置，而不是介於兩者之間的某個(gè)地方。

 。
  /* 風(fēng)格 */

  ＆：：後 {
    內(nèi)容： '';
    動(dòng)畫名稱：標(biāo)題；
    動(dòng)畫 - 定時(shí)功能：步長；
    動(dòng)畫臺(tái)式：scroll（）;
  }
}

至於關(guān)鍵幀，此部分（目前）非常簡單。我們將將第一幀（0％）設(shè)置為第一個(gè)標(biāo)題，並將其他標(biāo)題分配給我們之前發(fā)現(xiàn)的百分比。

 @keyframes headingContent {
  0％{content：'原色'}
  30％{內(nèi)容：'紅色電源'}
  60％{內(nèi)容：'藍(lán)色平靜'}
  90％，100％{內(nèi)容：'Yellow Joy'}
}

因此，現(xiàn)在我們有了一個(gè)帶有粘性標(biāo)題的網(wǎng)站，可以在您滾動(dòng)時(shí)進(jìn)行更新。

但是，等等，現(xiàn)在它只是立即切換。動(dòng)畫在哪裡？這是有趣的地方。由於我們不使用JavaScript或任何字符串操縱，因此我們必須自己編寫關(guān)鍵幀。最好的方法是從想要達(dá)到的目標(biāo)標(biāo)題開始，然後向後構(gòu)建。因此，如果您想在第一個(gè)和第二個(gè)標(biāo)題之間進(jìn)行動(dòng)畫動(dòng)畫，則看起來像這樣：

 @keyframes headingContent {
  0％{content：'原色'}
  
  9％{content：'主顏色'}
  10％{content：'primary colo'}
  11％{content：'primary col'}
  12％{content：'primary co'}
  13％{content：'primary c'}
  14％{content：'primary'}
  15％{content：'primary'}
  16％{content：'primar'}
  17％{content：'prima'}
  18％{content：'prim'}
  19％{content：'pri'}
  20％{content：'pr'}
  21％{content：'p'}
  
  22％{content：'r'}
  23％{content：'re'}
  24％{content：'red'}
  25％{content：'red'}
  26％{content：'紅色P'}
  27％{content：'紅色po'}
  28％{content：'紅色POW'}
  29％{content：'紅色powe'}
  
  30％{內(nèi)容：'紅色電源'}
  60％{內(nèi)容：'藍(lán)色平靜'}
  90％，100％{內(nèi)容：'Yellow Joy'}
}

我每次都會(huì)回去1％，根據(jù)需要?jiǎng)h除或添加字母。請(qǐng)注意，在其他情況下，您可能需要使用不同的步長，而不是總是1％。例如，在更長的標(biāo)題上，您可能需要較小的步驟。

如果我們?yōu)樗衅渌麡?biāo)題重複此過程，我們將獲得一個(gè)完全動(dòng)畫的標(biāo)題。

用戶首選項(xiàng)

我們之前談到了可訪問性，並確保內(nèi)容與輔助技術(shù)合作良好，但是您還應(yīng)該記住一件事：偏愛減少動(dòng)作。即使這並不是對(duì)這種動(dòng)畫的嚴(yán)格WCAG要求，但對(duì)於具有前庭敏感性的人來說，它可能會(huì)產(chǎn)生很大的影響，因此，最好提供一種在沒有動(dòng)畫的情況下顯示內(nèi)容的方法。

如果您想提供一個(gè)非動(dòng)畫替代方案，那麼您需要做的就是將@supports Block包裹在prefers降低的動(dòng)作查詢中：

 @Media屏幕和（首選減少動(dòng)態(tài)：無偏愛）{
  @supports（animation-timeline：scroll（））{
    /* 風(fēng)格 */
  }
}

升級(jí)

讓我們談?wù)勛兓?。在上一個(gè)示例中，我們對(duì)整個(gè)標(biāo)題文本進(jìn)行了動(dòng)畫操作，但是我們不必這樣做。您只需動(dòng)畫自己想要的部分，並使用其他動(dòng)畫來增強(qiáng)效果並使事情變得更有趣。例如，在這裡，我將文本“主顏色”保持了，並在處理動(dòng)畫文本後添加了一個(gè)跨度。

<h1 aria-hidden="true">
  原色<span></span>
</h1>

而且由於我現(xiàn)在有一個(gè)單獨(dú)的跨度，所以我還可以使其顏色動(dòng)畫以匹配每個(gè)值。

在下一個(gè)示例中，我將文本動(dòng)畫保留在跨度上，但是我沒有更改文本顏色，而是在標(biāo)題上添加了另一個(gè)捲軸驅(qū)動(dòng)的動(dòng)畫以改變其背景顏色。這樣，您可以根據(jù)需要添加盡可能多的動(dòng)畫並更改自己喜歡的任何東西。

輪到你！

CSS捲軸驅(qū)動(dòng)的動(dòng)畫不僅僅是一個(gè)很酷的技巧。他們是一個(gè)改變遊戲規(guī)則的人，可以為一個(gè)全新的網(wǎng)頁設(shè)計(jì)世界打開了大門。只要有一點(diǎn)創(chuàng)造力，您就可以將最普通的頁面變成互動(dòng)，令人難忘和真正吸引人的東西。從增強(qiáng)用戶體驗(yàn)的微妙效果到使您的網(wǎng)站脫穎而出的狂野，動(dòng)畫過渡的微妙效果，這些可能性確實(shí)是無窮無盡的。

那麼，您將通過滾動(dòng)驅(qū)動(dòng)的動(dòng)畫構(gòu)建什麼？您會(huì)用這個(gè)新的超級(jí)大國創(chuàng)建什麼？嘗試一下，實(shí)驗(yàn)，如果您想出一些很酷的東西，有一些想法，狂野的實(shí)驗(yàn)甚至奇怪的失敗，我很想聽聽它們。我總是很高興看到其他人的想法，因此請(qǐng)隨時(shí)分享您的工作，問題或反饋。

特別感謝CristianDíaz回顧了示例，確保一切都可以訪問，並為有價(jià)值的建議和改進(jìn)提供了貢獻(xiàn)。

以上是滾動(dòng)驅(qū)動(dòng)的粘性標(biāo)題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！