ちいつる

スクロールアニメーション

CSSスクロール駆動アニメ

JavaScript無しでスクロール連動。新CSSの animation-timeline で、上部に進捗バー(scroll())、各行は画面に入るとふわっと出現(view())。

ENGLISH

CSS Scroll-Driven Animations

  • CSSのみ
  • Scroll-driven CSS
約61行スクロールアニメーション の一覧 →

プレビュー

スクロール

操作枠内をスクロールすると動きます。

実装メモ

IntersectionObserver も rAF も使わない、純CSSのスクロール連動です。animation-timeline: scroll()/view() は Chrome/Edge/Safari対応(Firefoxは要フラグ)。未対応ブラウザでは要素は最初から表示されます。実ページでは scroll(root) でページ全体に連動させられます。

コード（コピーして使えます）

<div class="sd-scroller">
  <div class="sd-bar"></div>
  <p class="sd-hint">下にスクロール ↓</p>
  <div class="sd-item">CSSだけで</div>
  <div class="sd-item">スクロールに</div>
  <div class="sd-item">連動して</div>
  <div class="sd-item">ふわっと</div>
  <div class="sd-item">出現する</div>
  <div class="sd-item">🎉</div>
</div>

タグ

関連パーツ