web-slinger.css：wow.jsのように、しかしCSS-yのスクロールアニメーションがあります

この記事では、「スクロールトリガー」に焦点を当てたスクロールアニメーションを調査します。これは、ユーザーが特定のポイントを通過するとアニメーションがアクティブになるテクニックです。 現在、ネイティブのCSSサポートが不足していますが、巧妙なCSSテクニックを使用してこの効果を達成し、wow.jsのようなJavaScriptライブラリに代わるCSSのみの代替品を作成できます。 このアプローチでは、

プロパティ、カスタムプロパティ、およびスタイルクエリを利用しています。 animation-timeline既存のスクロールアニメーションソリューションは、Wow.jsで見られる目的の「1つの」動作とは異なり、上向きにスクロールするときにアニメーションを逆転させることがよくあります。 この制限により、「web-slinger.css」の作成に影響を与えました。

web-slinger.css：cssのみのスクロールアニメーションライブラリ

web-slinger.cssは、アニメーションを管理するために、カスタムプロパティ（

）とともに

や

などのクラスを採用しています。 このアプローチは、アニメーショントリガーをアニメーション化された要素から切り離し、柔軟性を提供します。 .scroll-trigger-n単純な例では、.on-scroll-trigger-nを使用して、animate.cssの「flipiny」アニメーションをトリガーします。 デモの「局所」のようなより複雑な例は、単一のスクロールポイントからの複数のアニメーションのトリガーを示しています。 --scroll-trigger-n cownterのマークアップは簡単です：

.scroll-trigger-8およびそのCSSは、動的なコンテンツの更新のためのスタイルのクエリをレバレッジします：

デモは、Web-Slinger.cssを外部リソースとして使用します

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

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

を使用して、永続的に固定された要素を作成することが含まれます。 スタイルクエリとカスタムプロパティは、この固定要素の可視性に基づいて他のアニメーションを制御します。

この手法は、ユーザー可視要素を直接アニメーション化することを避け、代わりに固定要素をトリガーとして使用します。 名前の表示進行状況のタイムライン（

）は、固定要素をアニメーション化する要素にリンクします。

CSSコードを表示view()

timeline-scope

制限と将来の改善

web-slinger.cssは機能的ですが、より多くのトリガーを備えたより大きなCSSファイルを生成します。 数字のクラス名にはセマンティックな明確さがありません。 理想的には、ネイティブブラウザのサポートは、仮説的な

属性と同様に、IDを使用してトリガーとターゲットをリンクすることを可能にします。

/** 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に似た宣言的アプローチを標準化のために採用することができます。

以上がweb-slinger.css：wow.jsのように、しかしCSS-yのスクロールアニメーションがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。