web-slinger.css：スウィーパーヴェース全体

私の以前の投稿は、火口での水平方向のスワイプの不可逆的な結果を強調しました。 私はそのフラストレーションを別の時に掘り下げますが、一見、スワイプナビゲーションはweb-slinger.cssに最適です。一方向のスクロールトリガーアニメーションのための私の実験的で純粋なCSSの代替手段。 （まだテーマソングに取り組んでいます！）

web-slinger.cssは、CSSのみを使用して、好み/嫌いな要素のためにTinderスタイルのスワイプインタラクションを処理できますか？ さらに重要なことは、これは一般的な需要に応じて、スパイダーピグ画像を使用して正当化するのでしょうか？ Spider-Pig Swiperの紹介 - 私の提案されたCaptchaの交換品（誰が

がスパイダーピグが好きではないからですか？）。 あなたの意見を登録するために、左または右下（今のところクロム/エッジのみ）をスワイプします。

視野を拡大します

web-slinger.cssは、明らかに、水平スクロール用に設計されていませんでした。 修正？単純なCSSオーバーライド：

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

これにより、クラスを持つ要素のWeb-Slingerのデフォルト動作が変更され、スクロールトリガーが垂直ではなく水平に反応します。 それ以外の場合、トリガーは、コンテナの幅のために視覚的に隠されているにもかかわらず、スワイパーの垂直折り目の上にあるため、すぐにアクティブになります。 scroll-trigger-n私の最初の手順には、Nikolay Talanovの優れたJavaScript Tinder Swipe Demoの分岐、JavaScriptと1つのカードを除くすべてのカードを削除してから、Web-Slinger.cssをインポートして水平パッチを適用しました。 カードコンテナは、3つの並んでビューポートサイズのスクロールスナップボックスで

になりました。中央のスライドを使用して、

、中央でユーザーを起動し、後方/前方スクロールを許可します。 position: fixedscroll-align: centerメモ：

型にはまらないスクロール駆動型アニメーションでは、スクロール可能な要素は見えるものをスクロールする必要はありません。 チェックボックスハックのようなものです。チェックボックスを非表示、ラベルのスタイル。デフォルトのUIではなく、スクロール可能な要素のCSS動作を活用します。 3番目のスライド上の

a divは拒否アニメーションをアクティブにしました：

うまくいきました！ （ナレーター：実際にはそうではありませんでした。それについては後で詳しく説明します。）scroll-trigger-1

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

これを追加すると、Spider-Pigはページの読み込みで自動的に「好き」になりました。 普遍的に崇拝されている人に最適です...（ahem、中年のCSSハッカー）。 しかし、Spider-Pigは普遍的に愛されていないので、一見同一の原則にもかかわらず、右のスワイプが予想とは異なる動作をした理由を調べてみましょう。

ステップバック

このバグは

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

の制限を強調しました。 web-slingerは、

backward

スクロールによってのみトリガーされるアニメーションに理想的ではないテクノロジーに依存しています。

視覚師は、animation-rangeに関係なく、要素がスクロール方向にビューポートを離れた後にアニメーションが完了することを示しています。

幸いなことに、Bramus（Chrome Devチーム）には、CSSのスクロール方向を検出するためのデモがあります。彼の巧妙な

カスタムプロパティを使用して、スタイルクエリで--scroll-direction要素の外観を制御できます：scroll-trigger-2

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

これにより、前のスライドで後方スクロールを介して到達した場合にのみ

が表示されます。 .scroll-trigger-2（3秒の3段階のアニメーションで制御）は現在のスライドをカウントし、嫌悪感をトリガーするために決定的なスワイプを必要とします。 --slide-index最終的なスワイプ

学んだ教訓

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

これは、主に後方スクロールでのみ実行されるスクロールトリガーアニメーションを使用することの課題のために、予想よりも複雑でした。 これは貴重な知識です。 現在の仕様に隠された電力は驚くべきものです。非常に具体的なスクロール動作に基づいてスタイルを整えることができます。 ただし、このパワーにアクセスするにはAPIをハッキングする必要がありました。 理想的な解決策は次のとおりです

このようなAPIを使用すると、スパイダーピグスイパーはハッキングを必要としません。

スクロール駆動型のアニメーションと、より柔軟な仕様のためのより広範なブラウザのサポートが、デザイナーが彼らの体験に非線形のストーリーテリングを構築することを奨励するためのより柔軟な仕様を願っています。 そうでない場合、アニメーションのタイムラインがより広くサポートされると、Web-Slinger.cssをより堅牢で制作にできるようにする時が来るかもしれません。

以上がweb-slinger.css：スウィーパーヴェース全体の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。