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

幾周前，我正在玩滾動驅動的動畫，只是在尋找各種隨機的事情。那時，我想出了動畫主題文本（H1）的想法，并使用SDA根據用戶在頁面上的用戶滾動位置更改標題本身。在本文中，我們將分解這個想法，并逐步重建它。這是我們將要進入的一般方向，在全屏中看起來更好，并在鉻瀏覽器中查看：

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

只是一個快速注意：這種方法確實依賴于關鍵框架的一些“魔術數(shù)字”，稍后我們將討論。盡管它們響應迅速，但這種方法確實最適合靜態(tài)內容，并且對于高度動態(tài)的網站來說并不理想。

仔細觀察動畫

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

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

從堅實的基礎開始

現(xiàn)在，您知道了文本動畫背后的技巧，讓我們看看如何將其與卷軸驅動的動畫相結合，并確保我們也有堅實，易于訪問的后備。

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

<main>
  <section>
    <h1>原色</h1>
    <p>三種原色（紅色，藍色和黃色）構成了色輪上所有其他顏色的基礎。以不同的組合混合它們會產生各種色調。</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="滾動驅動的粘性標題">
  </section>
  
  <section>
    <h2>紅力</h2>
    <p>紅色是一種大膽而鮮艷的色彩，象征著能量，激情和溫暖。它很容易吸引注意力，并且通常與強烈的情緒聯(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="滾動驅動的粘性標題">
  </section>
  
  <section>
    <h2>藍色平靜</h2>
    <p>藍色是一種平靜而涼爽的色彩，代表寧靜，穩(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="滾動驅動的粘性標題">
  </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="滾動驅動的粘性標題">
  </section>
</main>

至于樣式，我在此階段沒有做任何特別的事情，只是基礎知識。我更改了字體，調整了文本和標題大小，設置了主和部分的顯示屏，并用對象擬合修復了圖像大小。

因此，在這一點上，我們有一個簡單的網站，具有靜態(tài)，語義和可訪問的內容，這很棒。現(xiàn)在，目標是確保在我們開始添加效果時保持這種方式。

第二個第一個標題

首先，將在主頂部添加另一個H1元素。這個新元素將作為我們動畫文本的占位符，并根據用戶的滾動位置進行更新。是的，我知道第一部分中已經有H1。很好，我們會稍后解決，以便一次只能訪問一個。

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

請注意，我已經在此標題中添加了Aria-Hidden =“ True”，因此屏幕閱讀器不會撿起它?，F(xiàn)在，我可以在所有其他標題中添加專門為屏幕閱讀器的課程。這樣，任何“正?！辈榭磧热莸娜硕贾粫吹絼赢嫎祟}，而輔助技術用戶將獲得常規(guī)的靜態(tài)語義標題。

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

處理支持

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

第一步是隱藏我們剛剛使用Display添加的動畫標題：無。然后，我們將添加一個新的@supports塊，以檢查SDA支持。在支持SDA的該塊內部，我們可以更改標題的顯示屏。

.Sronly類也應進入@supports塊，因為我們只希望在效果處于活動狀態(tài)時將其應用，而不是在不支持時應用。這樣，就像使用輔助技術一樣，任何人在沒有SDA支持的情況下訪問頁面的任何人仍然可以獲得靜態(tài)內容。

 。
  顯示：無；
}

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

變得粘

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

當我們使用它的同時，讓我們添加一些基本樣式，包括背景，以便文本與標題背后的任何內容，輔助間距和白色空間的填充：Nowrap：將標題保持在一條線上。

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

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

現(xiàn)在，我們準備開始對文本進行動畫動畫。幾乎…

神奇的數(shù)字

要構建文本動畫，我們需要確切知道文本應在哪里更改。使用SDA，滾動基本上成為我們的時間表，我們必須確定該時間軸上的確切點才能觸發(fā)動畫。

為了使這更容易，并幫助您確定這些職位，我已經準備了以下腳本：

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

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

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

我不想深入此代碼，但是想法是根據滾動進度將其用于動畫文本的相同滾動時間表來動畫文本，并使用它來對自定義屬性（-scroll-loction）進行動畫化，并根據滾動進度從0到100進行動畫，并在內容中顯示該值。

如果我們在代碼開始時添加此內容，我們將在屏幕的左上角看到一個小紅色正方形，顯示當前的滾動位置為百分比（以匹配密鑰幀）。這樣，您可以滾動到所需的任何部分，并輕松標記每個標題應開始的百分比。

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

動畫文字

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

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

 。
  /* 風格 */

  ＆：：后 {
    內容： '';
    動畫名稱：標題；
    動畫 - 定時功能：步長；
    動畫臺式：scroll（）;
  }
}

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

 @keyframes headingContent {
  0％{content：'原色'}
  30％{內容：'紅色電源'}
  60％{內容：'藍色平靜'}
  90％，100％{內容：'Yellow Joy'}
}

因此，現(xiàn)在我們有了一個帶有粘性標題的網站，可以在您滾動時進行更新。

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

 @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％{內容：'紅色電源'}
  60％{內容：'藍色平靜'}
  90％，100％{內容：'Yellow Joy'}
}

我每次都會回去1％，根據需要刪除或添加字母。請注意，在其他情況下，您可能需要使用不同的步長，而不是總是1％。例如，在更長的標題上，您可能需要較小的步驟。

如果我們?yōu)樗衅渌麡祟}重復此過程，我們將獲得一個完全動畫的標題。

用戶首選項

我們之前談到了可訪問性，并確保內容與輔助技術合作良好，但是您還應該記住一件事：偏愛減少動作。即使這并不是對這種動畫的嚴格WCAG要求，但對于具有前庭敏感性的人來說，它可能會產生很大的影響，因此，最好提供一種在沒有動畫的情況下顯示內容的方法。

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

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

升級

讓我們談談變化。在上一個示例中，我們對整個標題文本進行了動畫操作，但是我們不必這樣做。您只需動畫自己想要的部分，并使用其他動畫來增強效果并使事情變得更有趣。例如，在這里，我將文本“主顏色”保持了，并在處理動畫文本后添加了一個跨度。

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

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

在下一個示例中，我將文本動畫保留在跨度上，但是我沒有更改文本顏色，而是在標題上添加了另一個卷軸驅動的動畫以改變其背景顏色。這樣，您可以根據需要添加盡可能多的動畫并更改自己喜歡的任何東西。

輪到你！

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

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

特別感謝CristianDíaz回顧了示例，確保一切都可以訪問，并為有價值的建議和改進提供了貢獻。

以上是滾動驅動的粘性標題的詳細內容。更多信息請關注PHP中文網其他相關文章！