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

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

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

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

）とともに

や

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

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

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

<div>
  <h2></h2>
  <div>
    <br><br><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">? Play again</a>
  </div>
</div>

web-slinger.cssの実裝の詳細(xì)

コアコンセプトには、アニメーションのタイムラインとして

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

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

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

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

CSSコードを表示view()

timeline-scope

制限と將來(lái)の改善

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

屬性と同様に、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>

スクロールトリガーアニメーションの未來(lái)は、ネイティブブラウザのサポートにあります。 web-slinger.cssに似た宣言的アプローチを標(biāo)準(zhǔn)化のために採(cǎi)用することができます。

以上がweb-slinger.css：wow.jsのように、しかしCSS-yのスクロールアニメーションがありますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。