CSSモーション選好を備えたスクロールタイムライン

キーポイントをすばやく閲覧します：

• メアリー・ルーは、「代替列スクロール」と呼ばれる典型的なコドロップスタイルのデモをリリースしました。
• スクロール効果は、以前の偶然の一致でカバーしていた機関車の巻物を駆動します。
• Bramusは、将来のCSSスクロールタイムライン機能の使用を調査して、ネイティブCSSスクロール効果を実現しています。彼はここから始まる4部構成の詳細なシリーズを書いた。
• まだ初期段階にありますが、 @scroll-timeline Chromeでマークされています。 Bramusは、特にWaapiと併用して使用する場合、CSS-Tricksでのこの機能の強力な使用も示しています。
• したがって、Bramusはプレゼンテーションのスクロールの側面を再構築するために設定しました（中央の列は自然にスクロールし、外側の2つの列が逆にスクロールします）。 PolyFillを使用して、WAAPIを追加してうまくコピーできることがわかります。とてもかっこいい。

CSSスクロールタイムラインを使用してprefers-reduced-motionと組み合わせて使用​​します

私が追加したい唯一のことは、このスクロールアニメーションが乗り物酔いを起こしやすい人々に影響を与える可能性があるため、 prefers-reduced-motionプロパティを考慮する必要があるということです。これを行うには、同じ行でJavaScriptのサポートされているテストとテストを組み合わせることができます。

もし （
    ！css.supports（ "animation-timeline：foo"）&& 
    ！window.matchmedia（ '（redured-reduced-motion：reduce）'）。マッチ
   ）{
     //クールなエフェクトを実行する}

reduceの逆をテストする方が良いかどうかはわかりません。いずれにせよ、CSSのトリックは、 @supportsテストで@scroll-timelineとanimation-timelineでやりたいことを何でもラップすることです（他のことをしたい場合）。

 @media（redurecured-motion：no-preference）{

    @supports（animation-timeline：works）{

      /*クールなエフェクトを実行*/

    }

}

それはデモンストレーションであり、すべてのクレジットはそれを実現させたブラマスに対するものです。

ああ、あなたは知っていますか？ @whenが機能になると、CSSはより簡潔になります。

 @サポート（アニメーション - タイムライン：作品）とメディア（還元運動を好む：非プレー化）{

} @それ以外 {

}

以上がCSSモーション選好を備えたスクロールタイムラインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。