アンディ・ベルは私にとって完璧な餌を持っています: 楽しいシャドウコーディングチャレンジ。 ページを横切る単純な線ですが、その線が 光源。 光源の下の正方形には、 box-shadow。四角形がスクロールするようにするにはどうすればよいですか? box-shadow その「光源」を尊重するために自動的に調整しますか？
JavaScript?もちろん、これは万能の JavaScript で実現できます。 それはアンディ自身がやったことだ 8年前 このアイデアの始まりとともに。
キティ・ジローデルがブログに投稿しました を含むソリューションで animation-timeline: scroll(); それはまさにアンディが狙っていた種類のものだと私は確信しています。しかし、キティは JavaScript からのいくつかの情報に依存していました。
CSSでは読めません
offsetTopまたはoffsetHeightしたがって、それらを JavaScript からカスタム プロパティとして渡します。
もちろんこれは違法ではありません。
これは、JavaScript が必要なだけでなく、たとえスクロール駆動のアニメーションに依存しているとしても、仮定を減らし、より柔軟な状況で適切に機能するソリューションを作成するためにおそらく非常に重要であるものの 1 つであると思います。
しかし、確かに、これらの筋肉をもう少し強く曲げて、方法があるかどうかを確認するのは楽しいです。 ロマン・コマロフが飛び込んだ スクロール駆動のアニメーションも使用しましたが、 animation-timeline: view(); ではなくタイプします scroll()。これが重要だと思います。これにより、ビューポート内のボックスの位置に関する情報がロック解除され、他の方法では得られなかった情報が得られるからです。 Roman のソリューションは個人に合わせて調整しないので、とても気に入っています box-shadow 値がまったく関係なく、通常は「下向き」のシャドウから「上向き」に調整するだけで、それらの間が補間されます。すべてのロジックが組み込まれています animation-range 宣言。
というテイクがあります。 box-shadow 値は直接操作されます と view() ただし、タイムラインは Chris Bolson からスクロールしてください。各シャドウ プロパティはキーフレーム内で直接操作されます。他のものと同様に、これにはカスタム プロパティが次のとおりである必要があります。 @property アニメーションがそれらをアニメーション化する方法を認識できるように、タイプでデカールされます。クリスのアプローチは、光源から遠ざかるほど光るタッチがあり、非常に上品です。 ライター 影、とても気持ちいいです。
Chris Wachtman は、光源のアイデアに基づいていくつかの代替テイクを作成して参加しました。光源が線じゃなかったらどうなるかというと、 代わりに、カーソルが小さな太陽に変わりました。
CSSはとてもクールです。キティ、クリス、ローマン、あなたもとてもクールです。
Views: 0
