web-slinger.css：像wow.js一樣，但是帶有CSS-y滾動動畫

>本文探討了滾動動畫，專門針對“滾動觸發”，這是一種技術，一旦用戶滾動就可以激活特定點，則動畫會激活。 雖然目前缺乏本機CSS支持，但我們可以使用巧妙的CSS技術來實現此效果，從而創建一個僅使用CSS的JavaScript庫，例如WOW.JS。 這種方法利用animation-timeline屬性，自定義屬性和样式查詢。

>

>現有的滾動動畫解決方案在向上滾動時通常會反向動畫，這與WOW.J.中所需的“一對”行為不同。 此限制啟發了創建“ web-slinger.css”，一個純CSS庫模仿wow.js功能。

> web-slinger.css：僅CSS僅滾動動畫庫

>

> web-slinger.css使用.scroll-trigger-n>和.on-scroll-trigger-n的類，以及自定義屬性（--scroll-trigger-n）來管理動畫。 這種方法將動畫從動畫元素中觸發，提供靈活性。

一個簡單的示例使用

>觸發來自Animate.css的“ Flipiny”動畫。 更複雜的示例，例如演示中的“ cownter”，演示了從單個滾動點觸發多個動畫。 .scroll-trigger-8

cowner的標記很簡單：

<div>
  <h2></h2>
  <div>
    <br><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">? Play again</a>
  </div>
</div>

及其CSS利用樣式查詢動態內容更新：>

演示將web-slinger.css用作外部資源。

.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';
    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }

  a {
    text-decoration: none;
    color: blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}

> web-slinger.css實現詳細信息

核心概念涉及使用

作為動畫時間表來創建永久固定元素。 然後，樣式查詢和自定義屬性基於此固定元素的可見性控制其他動畫。

>該技術避免了直接對用戶可見的元素進行動畫動畫，而是將固定元素作為觸發器。 命名查看進度時間表（

）將固定元素鏈接到要動畫的元素。 view()

>查看CSS代碼timeline-scope

>限制和未來改進

/** Each trigger element toggles `--scroll-trigger-n` from 0 to 1, unpausing animations on `.on-scroll-trigger-n` **/
:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to { --scroll-trigger-1: 1; }
}

/** Animate elements only when `.scroll-trigger-1` is in view **/
.on-scroll-trigger-1 { animation-play-state: paused; }
@container style(--scroll-trigger-1: 1) { .on-scroll-trigger-1 { animation-play-state: running; } }

/** Trigger element, fixed to top, activating animations **/
.scroll-trigger-1 { view-timeline-name: --trigger-timeline-1; }</integer>

> Web-slinger.css雖然功能性，但會生成帶有更多觸發器的較大的CSS文件。 編號的班級名稱缺乏語義清晰度。 理想情況下，本機瀏覽器支持將允許使用ID鏈接觸發器和目標，類似於假設的屬性。

捲軸觸發的動畫的未來在於本機瀏覽器支持。 可以採用類似於web-slinger.css的聲明性方法進行標準化。

以上是web-slinger.css：像wow.js一樣，但是帶有CSS-y滾動動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！