CSSスクロールタイムラインを使用して、無制限の寸法をスライドさせます-CSSチュートリアル-php.cn

Slide Through Unlimited Dimensions With CSS Scroll Timelines

CSSの元のデザイン哲学は、それがWebの動作制御の主要なテクノロジーになると想像していたCSSの元のデザイン哲学であり、CSSが宣言的に機能を実装できない場合に言及をスクリプト化することは代替言語にすぎません。 CSSの優先使用のこの方法論は、「スクリプトはプログラミングであるが、プログラミングは難しい」という概念に基づいています。

pseudoクラスの導入以来、CSSはJavaScriptの開発者によって作成されたパターンを標準化し、それらをCSS標準に「含めた」。この観点から、JavaScriptは「回避策」のようなものであり、CSSは公式のアプローチです。 ：hover したがって、CSSを使用してスクリプトのような動作を実装すると、「awkish」のように感じられなくなり、新しい

機能のような機能が表示されることは驚くことではありません。多くの開発者は、巧妙な視差スクロールWebサイトを実装しているため、このCSS機能「Sprite」をボトルに戻すことができません。次の視差スクロールサイトでst音のメインスレッドアニメーションが必要ない場合は、CSSハッカーの「ダークサイド」に目を向ける必要があります。（冗談）命令的なプログラミングを好む場合は、アソシエーションアニメーションをスクロールするための新しいJavaScript APIもあります。

JavaScriptの例をCSS scroll-timelineに移行します

Parallax Scroll Animationの例を変更するChris Coyierの前に、Chrisが使用したCSSを

CSSコードの行でアニメーションを制御し、十分に簡単なJavaScriptコードを完全に削除します。

パラメーターなしでscroll-timeline関数を使用すると、「匿名のスクロール進行状況タイムライン」が設定されます。つまり、ライティングモードが英語の場合、ブラウザは垂直にスクロールできる最近の祖先要素に基づいてアニメーション化します。残念ながら、両方ではなく、特定の要素のx軸またはy軸のスクロールに基づいて、アニメーション化することを選択するだけで非常に便利です。関数として、パラメーターをに渡すことができます。これにより、スクロールがアニメーションを実行する方法をより適切に制御できます。

多次元実験

body, .progress, .cube {
  animation-timeline: scroll();
}

ログイン後にコピー

scroll()属性が優れています。コンテナ要素に適用するということは、同じ割り当てられたスコープを持つスクロール可能な要素に基づいて、選択した祖先要素の属性をアニメーション化できることを意味します。これにより、CSS HoudiniはCSSでアニメーションに優しい継承可能なプロパティを登録できるため、ページ上の複数のスクロール可能な領域に基づいて同じ要素のアニメーションを組み合わせることができます。これにより、以下の私の実験など、興味深い教育デザインの可能性への扉が開かれます。 scroll()

ライトグリーンカードの水平な物語をスクロールすると、3D NESコンソールが水平方向に回転し、ダークグリーンカードの垂直な物語をスクロールすると、NESコンソールが垂直に回転します。私の以前の投稿で、私は私の過去のCSSトリックは常にCSSに隠れて限られた可能性を示す可能性に要約されていると述べました。私がこのロールベースの実験に興味があるのは、組み合わせの垂直回転と水平の回転の爆発の組み合わせです。アニメーション化されたタイムラインは、過去に不可能だった純粋なCSSの対話性を提供します。

実装の詳細は、timeline-scopeの使用およびカスタムプロパティほど重要ではありません。 2つのカスタム角度プロパティを登録します：

body, .progress, .cube {
  animation-timeline: scroll();
}

ログイン後にコピー

ジュリアンガーナーの驚くべきCSS 3Dモデリングアプリケーションの例から、3Dモデルを「借りる」ことができます。次のように、新しい変数に基づいて3D回転を行うように.sceneクラスを更新します。

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

ログイン後にコピー

次に、2つのカスタムという名前のスコープを備えた

要素を提供します。 body scroll-scope

複数のスコープを渡すことに関する公式のドキュメントはありませんが、Google ChromeとEdgeでは機能します。正式にサポートされている機能ではない場合は、非常に便利であるため、標準の一部になることを願っています。

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

ログイン後にコピー

次に、2つのスクロール可能なカードとアニメーションをトリガーする軸の指定されたタイムラインを定義します。

そしてアニメーションをシーンに追加します：

body {
  scroll-scope: --myScroller,--myScroller2; 
}

ログイン後にコピー

3Dモデルはドキュメント本体のxおよびy角を継承するため、スクロールカードは垂直角度と水平角の変化の組み合わせでモデルを回転させるようになりました。

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

ログイン後にコピー

Scrollbarを超えたユーザーコントロールアニメーション

慎重に考えてください、この動作は、スクロール駆動型のアニメーションに役立つだけではありません。上記の実験では、スクロール可能な領域をスライダーとして使用して、3Dモデルの特性を制御します。仕事を終えた後、私は散歩に出かけ、実際の範囲の入力がアニメーションのタイムラインを制御できる場合、それがどれほどクールになるかを空想しました。それから私は彼らができることを見つけました！少なくともクロムで。純粋なCSS CMS？

Julian Garnerの3Dモデルを要求している間、範囲入力を使用して彼のX-Wingモデルを制御できるかどうかを見てみましょう。

CSSを使用するだけでこれを行うことができ、任意の数のプロパティでそれを行うことができます。私にとっては、それで十分ではありません。アニメーションのタイムラインを操作できる他の入力コントロールを見たいです。テキストフィールドがアニメーションを入力するときにアニメーションを押している、またはボタンがアニメーションを再生または逆にできると想像してください。後者は、属性を組み合わせることにより、ある程度実装できます。しかし、私の経験では、ブラウザを使用して複数のカスタムプロパティをアニメーション化しようとすると混乱する可能性があります。対照的に、アニメーションのタイムラインはこのユースケースを念頭に置いて設計されているため、スムーズに実行され、まさに私が期待したことを実行しました。

この新興CSS機能の可能性に気づいたのは私だけではありません。誰かがこの巧妙なDOOMクローンを実装して、scroll-timelineとチェックボックスのトリックを組み合わせて実装しました。私の問題は、それでもまだ十分ではないということです。 Chromeには、ScrollbarsとRange Inputsをゲームコントロールとして使用してAvatar Builderを実装するのに十分なリソースがあります。私は、scroll-timeline機能が登場する前に時代に前例のない、予測不可能で複雑な体験を試してみてうれしいです。結局のところ、エイリアンにビデオゲームの定義を説明しなければならない場合、それが単なるインタラクティブなアニメーションだとは言いませんか？

以上がCSSスクロールタイムラインを使用して、無制限の寸法をスライドさせますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。