テック技報最新号へ →
デザイン

スクロール連動アニメーションをCSSだけで作る（パララックス・セクションの演出）

JSライブラリを使わずに、scroll-driven animations でパララックスやセクションの出現アニメーションを作る。対応していないブラウザでは動かないだけ、という段階的強化にする。

@jh3yy · 投稿 2026-06-16
#CSS#アニメーション#スクロール#パララックス

どんな問題を解決するか / いつ使うか

LPのセクションに動きを付けたいが、JSのスクロールライブラリを入れたくないとき。

やり方

  1. 段階的強化にする：
css
@supports (animation-timeline: view()) {
  .col { animation: drift linear both; animation-timeline: view(); }
}
@keyframes drift { from { translate: 0 calc(var(--speed) * 1px); } to { translate: 0 calc(var(--speed) * -1px); } }
  1. パララックスは同じ @keyframes を複数の列で使い回し、カスタムプロパティと calc() で速さだけ変えるとレスポンシブでも崩れにくい（@jh3yy の例）。
  2. セクションのアニメーションもCSSだけで作れる（@tak_dcxi の作例）。
  3. 「スクロールで発火して最後まで再生する」タイプ（スクロールトリガー）は、新しいCSS仕様として検討・実装が進んでいる（@azukiazusa9 の記事）。対応状況を確認してから使う。
  4. AIに頼むときはスクロールアニメーションは「10の用語」で指示するで指示する。

注意点・対応状況

  • CSSは手法の説明用に補った例。
  • 情報を探すためのサイトでは、むやみにアニメーションさせない方がよいという調査もある（@sogitani_baigie）。
  • prefers-reduced-motion で止められるようにする。

出典

X の元の投稿を開く