ShowMotion

Scroll

Scroll-Linked Animation (スクロール連動アニメーション)

別名 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation

アニメーションの進行がスクロール位置に直結し、進めると再生され、戻すと巻き戻ります。

使いどころ

ストーリーテリングページ、進行表現

バリエーション

  • direct
  • smoothed
  • root
  • nearest
  • block axis
  • inline axis
  • entry
  • exit
  • cover
  • contain

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にスクロール連動アニメーション(Scroll-Linked Animation)を追加してください。スクロール駆動アニメーション(scroll-driven animation)、スクロールスクラブ(scroll scrub)とも呼ばれます。
アニメーションはスクロール位置にぴったり合わせて動き、下へスクロールすると進み、上へ戻すとその場で巻き戻るようにしてください。時間ベースのイージングは付けないでください。
アニメーション全体を明確なスクロール範囲に割り当て、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自然な静止状態を表示してください。

似ているモーション

Scroll-Triggered Animation (スクロールトリガーアニメーション)

別名 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions

要素がビューポートに入ったり出たりしたときに、アニメーションが一度再生されます。

使いどころ

フェードインするセクション、遅延表示

Parallax (パララックス)

別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero

スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。

使いどころ

ヒーローの背景、ランディングページ

Zoom on Scroll (スクロールズーム)

別名 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom

スクロールに合わせて、要素やシーンが拡大・縮小します。

使いどころ

ヒーローのイントロ、画像の拡大表示

Text Reveal (テキストリビール)

別名 Scroll Text Reveal, Word-by-word Reveal

段落の単語が、スクロールに合わせて薄い状態から完全な不透明へと変わります。

使いどころ

マニフェストや導入の段落

Smooth Scroll (スムーススクロール)

別名 Smooth Scrolling, Inertia Scroll

スクロールやアンカーへのジャンプが、急に動かずイージングでなめらかに移動します。

使いどころ

アンカーナビゲーション、上質感のあるページ

Stacking Cards (スタッキングカード)

別名 Sticky Stacking Cards, Card Stack Scroll

スクロールするとカードが上部に固定されて次々と重なり、前のカードが少し縮むことが多いです。

使いどころ

機能紹介リスト、ポートフォリオ

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。