ShowMotion

Scroll

Sticky Header Shrink (スティッキーヘッダーシュリンク)

別名 Shrinking Header, Shrink on Scroll

下へスクロールすると、固定ヘッダーの高さやサイズが小さくなります。

使いどころ

ナビゲーションバー

デモのソースを見る

プロンプト

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

[適用する場所]にスティッキーヘッダーシュリンク(Sticky Header Shrink)を追加してください。シュリンキングヘッダー(shrinking header)、シュリンクオンスクロール(shrink on scroll)とも呼ばれます。
ヘッダーは上部に固定したまま、少し下へスクロールしたらロゴを小さくした細いバーへなめらかに縮み、一番上に戻ったら元の大きさに戻るようにしてください。
ヘッダーのサイズが変わる間、下のコンテンツがずれないようにしてください。

似ているモーション

Hide on Scroll Header (スクロールで隠れるヘッダー)

別名 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation

下にスクロールするとヘッダーが隠れ、上にスクロールすると再び現れます。

使いどころ

モバイルや長いページのナビゲーションバー

Pinning (ピン留め)

別名 Pinned Section, Sticky Section, Scroll Pin

一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。

使いどころ

スクロール連動のストーリーテリング、機能紹介

Text Marquee on Scroll (スクロールテキストマーキー)

別名 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity

ページを縦にスクロールすると、大きなテキストの行が横方向にスライドします。

使いどころ

ブランドメッセージ、ヒーローセクション

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

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

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

使いどころ

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

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