6月2日、Dan氏が「Utils CSS-native parallax effect」と題した記事を公開した。
従来のJavaScriptベースのパララックス効果に代わる、CSS Scroll-driven animationを使った新しい実装手法が紹介されている。この手法では、メインスレッドをブロックすることなく、単一のユーティリティクラスでパフォーマンスに優れたパララックス効果を実現できる。
なぜ今CSS-nativeなパララックスが注目されるのか
これまでパララックス効果といえば、JavaScriptでのスクロールイベント監視が定番だった。しかし、メインスレッドをブロックする問題やコードの複雑化が課題となっていた。
CSS Scroll-driven Animationsは2024年からChrome・Edge・Firefoxで相次いで実装が進み、2026年現在では主要ブラウザでの対応が完了している。この新仕様により、これらの問題が一気に解決される。メインスレッドから外れた動作によるパフォーマンス向上、宣言的で保守しやすいコード、そして単一のユーティリティクラスとしての再利用性が大きな魅力だ。
CSS Scroll-driven animation timelinesの仕組み
核となるのはview-timeline-nameプロパティによるview progress timelineの作成だ。これにより要素のスクロール進行度を0-100%で追跡し、アニメーションのタイムラインとして利用できる。
.parallax {
view-timeline-name: --parallax-tl;
view-timeline-axis: block;
overflow: hidden;
& > * {
scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
animation: parallax auto linear both;
animation-timeline: --parallax-tl;
animation-range: cover;
will-change: translate;
}
}
@keyframes parallax {
from {
translate: 0 calc(var(--parallax-offset, 20) * -1%);
}
to {
translate: 0 calc(var(--parallax-offset, 20) * 1%);
}
}
view-timeline-axis: blockは、ブロック軸（通常の書字モードでは垂直方向）での進行を追跡する。要素がビューポートに入り始めた瞬間を0%、完全に離れた時点を100%として扱う。
子要素ではanimation-timeline: --parallax-tlによってアニメーションのクロックを時間ベースからスクロールベースに切り替える。残りのanimationプロパティも連動する：
auto：継続時間がタイムラインから決まるlinear：スクロール進行が動きに直接マップされるboth：アクティブ範囲外でも開始・終了フレームを保持する
⚠️ 注意：animation-timeline長記法プロパティはanimation短記法に含まれず、別途宣言が必要。さらに、短記法は含まれない長記法を初期値にリセットするため、animation-timelineはanimation短記法の後で宣言しなければならない。
空白を防ぐスケーリングの仕組み
パララックス効果では、子要素がコンテナ内で上下に移動するため、移動により空白の帯が露出してしまう問題がある。
この解決策として、子要素を事前に拡大してクリップ領域を確保する。上下にオフセット分の余白が必要なので、全体では2倍のオフセットが必要だ：
scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
デフォルトオフセット20の場合、子要素は140%のサイズでレンダリングされ、余分な部分はコンテナのoverflow: hiddenでクリップされる。これにより±20%の移動範囲のどの位置でも、常にボックスを覆うのに十分なコンテンツが保たれる。
優れた設計として、translateとscaleの両方が同じ--parallax-offset変数を参照している点がある。オフセットを上げると強い効果が得られ、スケールも自動的に適合するため：
<div class="parallax" style="--parallax-offset: 30;">
<img src="…" />
</div>
will-change: translateは最後の仕上げで、この要素のtranslateが変更される予定であることをブラウザに伝え、事前に専用レイヤーに昇格させるヒントとなる。
アクセシビリティとブラウザサポート
パララックスはスクロールに連動した動きであり、前庭機能障害のあるユーザーは無効にしたいと考える。prefers-reduced-motion: reduceを尊重するのが重要だ：
@media (prefers-reduced-motion: reduce) {
.parallax > * {
animation: none;
scale: 1;
}
}
ブラウザサポートについては、Can I Useで最新状況を確認できる。2026年現在、主要ブラウザでサポートされているが、古いブラウザ対応が必要な場合は@supportsを使ったフォールバックを検討したい。
この手法により、JavaScriptに依存せず、パフォーマンスに優れたパララックス効果を簡潔なCSSで実現できる。単一のユーティリティクラスとしてプロジェクトに組み込めるシンプルさも大きな魅力だ。
詳細はUtils CSS-native parallax effectを参照していただきたい。
