ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSモーション選好を備えたスクロールタイムライン
キーポイントをすばやく閲覧します:
@scroll-timeline
Chromeでマークされています。 Bramusは、特にWaapiと併用して使用する場合、CSS-Tricksでのこの機能の強力な使用も示しています。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 サイトの他の関連記事を参照してください。