スクロール駆動型アニメーション 今では使用可能に少し近づいています Safariは技術的なプレビューでそれらを持っています そして Firefoxは旗の後ろにそれらを持っています。 Chromeがそれらをリリースしました。

Saron YitbarekはAppleのためにそれについてブログを書いています、そして見るのはいいことです。 Appleはこれまでにないものではありません 「一般的にWeb開発のための教育コンテンツを作成します」 部門ですが、多分それは変化しています。私はサロンが巻物駆動のアニメーションを築く方法が好きです：

このフレーミングで私が気に入っているのは、ターゲットとタイムラインがまったく異なる要素になる可能性があることを強調していることです。彼らはまた、彼らがDOMのどこに住んでいるかについての特定の要件を持っていません。ランド

that scrolls can be assigned a custom timeline name that some other totally rando

他の場所でアニメーション化します。それはただの自由な考えです。

また、スクロール駆動型のアニメーションについて知っておくべき重要なこともあります。2つの種類があります。それらの1つはです animation-timeline: scroll(); タイムラインは単に要素がどの程度スクロールしているか、もう1つは animation-timeline: view(); タイムラインは、ビューポート内の要素の可視性に関するすべてです（ブラウザウィンドウ）。派手なデザインにとって、後者はおそらくもう少し楽しくて面白いかもしれません。そして、それはあなたが学ぶ必要があるもう少しを持っています、 animation-range。繰り返しますが、サロン・イトバレクはそれについて新しい記事を持っています： 次のスクロール駆動型アニメーションのアニメーションレンジのチートシート。ありがたいことに、それにはたくさんのキーワードがあり、サロンはそれらがどのように機能するかを説明しています。

私、私はついにブラマスを見る機会を得ました ビューの遷移とスクロール駆動型のアニメーションに赤ちゃんがいた場合、これは私にとって少し心を吹く概念です。彼らは非常に異なるアイデアのように感じますが、繰り返しになりますが、ビューの遷移は基本的にあなたが起こりたいアニメーションを定義し、アニメーションする方法であり、スクロール駆動型アニメーションはビューの移行の進行方法である可能性があります。それはまだ奇妙です：スクロールの位置がどのようにしてDOMの状態に影響するのかのように??あなたはおそらく上記のビデオ/スライドでBramusの説明を見るべきですが、私は自分でそれを突くことに抵抗することができませんでした 最近のストリームで。

ブラウザのサポートのために、スクロール駆動型のアニメーションを使用することを少し理解していますか？さて、Cyd Stumpelにはそれについて言うことがいくつかあります フォールバックCSSスクロール駆動型アニメーションへの2つのアプローチ。

スクロール駆動型のアニメーションは、年末までにすべての主要なブラウザに着陸するように設定されていますが、私はまだ多くの人が制作で使用しているのをまだ見ていません。

彼らは2025年などではありませんが、3つの主要なエンジンすべてが少なくともフラグを立てられた実装を持っているので、それほど長くはないはずです。しかし、ブラウザには常に彼らをサポートしていない人々の長い尾があるので、何ですか？ Cydは2つのアプローチをうまく説明しています。 プログレッシブエンハンスメント そして 優雅な劣化。これらの概念はしばしば違いを説明するのが難しいので、これは素晴らしい例です。これらの2つのリンクは今ですか？概念を完全に披露するペン。

私はあなたを残します アミット・シーンはワイルドになります スティッキーヘッダーでは、ヘッダーのテキストが自分自身をタイピング（そして戻って）のように、スクロール駆動型のアニメーションで楽しいことをする。