こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、JavaScriptを使わずにスクロール連動アニメーションをCSSだけで実現する方法をご紹介します。
「ユーザーのスクロールに合わせて動く演出を入れたいけど、JSは難しい…」と感じている方も多いのではないでしょうか。
そんな方におすすめなのが、CSSの position: sticky と transform を組み合わせた手法です。
この記事では、「スクロールで画像が拡大」「テキストがフェードインしながらスライド」といった演出を、純CSSで構築する方法を実例つきで紹介します。
LPやポートフォリオサイトなど、デザイン性が求められるページにぴったりのテクニックです。
スクロール連動アニメーションとは？
スクロール連動アニメーションとは、ユーザーがページをスクロールする動きに応じて、要素が動いたり変化したりする演出です。
たとえば以下のような表現が含まれます
- 画像がゆっくりと拡大・縮小する
- テキストがふわっと現れる
- 背景が切り替わる
これまで、こうした表現はJavaScript（ScrollTriggerやIntersectionObserverなど）を使うのが一般的でした。
ですが、CSSの position: sticky を活用することで、一部のスクロールアニメーションはJavaScriptなしでも実現可能なのです。
基本構造：position: sticky を使った固定表示
position: sticky は、要素がスクロールで一定の位置に「張り付く（固定される）」性質を持つCSSプロパティです。
たとえば以下のようなHTML＋CSSで、ある要素をスクロール中に固定できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように設定すると、.sticky-box はスクロールしても一定の位置に貼り付き、ユーザーの視線をキープできます。
transformと組み合わせてアニメーションに応用
ここに transform や opacity を組み合わせることで、スクロールと連動するアニメーションが可能になります。
例：スクロールで画像が徐々に拡大する表現
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このようなホバーアニメーションをスクロールで制御するには、sticky要素を重ねるレイヤーにし、ページ全体を長く設計することがコツです。
応用例：フェードインしながらスライド表示
次は、スクロールに合わせてテキストが右から左にスライドしてフェードインするアニメーションです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
疑似的な「スクロール時に表示が切り替わる」動きがCSSのみで再現できます。
JavaScriptなしでできる演出の限界と可能性
position: sticky によるスクロールアニメーションは手軽で効果的ですが、以下のような注意点もあります。
- スクロール量に応じた細かい制御（％やpx単位）は難しい
- 要素が画面外に出たときの検知はできない
- 複雑なタイミング制御や、要素の遅延表示はJavaScriptが必要
ただし、「1画面ずつ魅せるLP」や「一部の強調セクション」などでは十分実用的です。
まとめ：JSなしでも魅せる動きは作れる
スクロール連動アニメーションは、見た目のインパクトを高めたり、ユーザーの注意を集めるのに非常に有効です。
JavaScriptを使わなくても、CSSだけでそれらの基本的な演出は可能です。
- position: stickyで要素を固定
- transformやopacity を組み合わせて動きを表現
- 構造を工夫すれば、インパクトのある演出も可能
「まずはできる範囲でデザインを進化させたい」「JSなしで印象的なLPを作りたい」
そんな方は、CSSの力を最大限に活用してみてください！
