Scroll-Driven Animationsの`scroll()`バリエーションを利用することで、開発者はユーザーがページをスクロールする際に、グリッド内の異なるカラムが異なる速度で移動する視覚的な錯覚を作り出すことができます。この手法は、コンテンツの視覚的な動きをビューポートの標準的な線形スクロールから切り離すものであり、以前は重いJavaScriptのオーバーヘッドなしでは実現が困難だったクリエイティブなギャラリーレイアウトを可能にします。

可変速度スクロールの仕組み

核心となる仕組みは、2カラムグリッドの右側のカラムのような特定のコンテナに方向変形を適用することです。スクロールコンテナを介して実際のコンテンツを移動させる代わりに、開発者はルート要素のスクロール位置に基づいて値が変化する`translateY`アニメーションを適用します。

`@keyframes`アニメーションを定義し、それを`scroll()`タイムラインにリンクすることで、右側のカラムを同じスクロール距離に対して左側のカラムよりも大きな距離を移動するようにプログラムできます。例えば、`12vh`から`-20vh`まで移動する`translateY`は、「ドリフトアップ」効果を生み出し、コンテンツが標準的なページの進行よりも速く動いているように見せます。

「コツは、スクロールに合わせて値が変化する方向変形を適用することです。」

— Multi-Column Different-Speed Scrolling – Master.dev Blog

ビューベースのアニメーションのレイヤー化

グローバルなカラムの動きを超えて、Scroll-Driven Animationsの`view()`バリエーションを使用することで、それらのカラム内の個々のアイテムを細かく制御できます。これは「ズーミーズ」を作成するために使用でき、これは写真がユーザーの可視領域を通過する際にスケールアップしたり、わずかにシフトしたりする効果です。

これらのアニメーションは`view()`タイムラインに結び付けられているため、要素のビューポート内での可視性に基づいて効果が自動的にトリガーされ、反転します。これにより、カラムが一定の速度でドリフトしながら、その中の画像が独立した局所的なアニメーションを実行するという、複雑で多層的な動きが可能になります。

トレードオフとユーザーエクスペリエンス

これらの効果は洗練された美学を提供しますが、ユーザビリティに関する懸念も生じさせます。強度の高い非線形スクロールは、一部のユーザーに動揺や吐き気を引き起こす可能性があるため、アクセシビリティのために`prefers-reduced-motion`クエリの実装を検討することが推奨されます。

さらに、Scroll-Driven Animationsはまだすべてのブラウザで普遍的にサポートされているわけではないため、著者は`@supports`クエリを採用してギャラリーのアクセシビリティを確保しています。サポートされていないブラウザでは、カラムは単に標準的で均一な速度でスクロールし、ギャラリーの基本機能は維持されます。