滾動驅動的粘性標題

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

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

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

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

仔細觀察動畫

在我們深入研究捲軸驅動動畫之前，讓我們花一分鐘的時間查看文本動畫本身以及它的實際工作方式。這是基於我幾年前想創建打字機效應的想法。當時，我發現的大多數方法都涉及對元素的寬度進行動畫，使用單拼字體或純色背景。這些都不對我有用。因此，我尋找一種使內容本身動畫的方法，而解決方案通常是偽元素。

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

從堅實的基礎開始

現在，您知道了文本動畫背後的技巧，讓我們看看如何將其與捲軸驅動的動畫相結合，並確保我們也有堅實，易於訪問的後備。

我們將從一些基本的語義標記開始。我將所有內容都包裹在主要元素中，其中包含各個部分。每個部分都有自己的標題和內容，例如文本和圖像。在此示例中，我設置了四個部分，每個部分都帶有一些文本和一些圖像，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>紅色是一種大膽而鮮豔的色彩，象徵著能量，激情和溫暖。它很容易吸引註意力，並且通常與強烈的情緒聯繫在一起。</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>藍色是一種平靜而涼爽的色彩，代表寧靜，穩定和信任。它喚起了天空和海洋的圖像，創造了一種寧靜的心情。</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>黃色是一種明亮而開朗的顏色，依靠光線，樂觀和創造力。這是非常明顯的，帶來了幸福和希望的感覺。</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>

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

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

第二個第一個標題

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

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

請注意，我已經在此標題中添加了Aria-Hidden =“ True”，因此屏幕閱讀器不會撿起它。現在，我可以在所有其他標題中添加專門為屏幕閱讀器的課程。這樣，任何“正常”查看內容的人都只會看到動畫標題，而輔助技術用戶將獲得常規的靜態語義標題。

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

處理支持

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

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

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

 。
  顯示：無；
}

@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;
}

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

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

神奇的數字

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

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

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

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

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

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

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

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

動畫文字

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

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

 。
  /* 風格 */

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

至於關鍵幀，此部分（目前）非常簡單。我們將將第一幀（0％）設置為第一個標題，並將其他標題分配給我們之前發現的百分比。

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

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

但是，等等，現在它只是立即切換。動畫在哪裡？這是有趣的地方。由於我們不使用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％。例如，在更長的標題上，您可能需要較小的步驟。

如果我們為所有其他標題重複此過程，我們將獲得一個完全動畫的標題。

用戶首選項

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

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

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

升級

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

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

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

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

輪到你！

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

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

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

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