スクロール演出(応用)
ピン留めスクロール
あるセクションが画面に固定されたまま、スクロール進行に応じて内部の要素(テキスト/数値)が切り替わる。position:sticky+スクロール進捗で内部をmorph。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード(コピーして使えます)
<div class="pin-root">
<div class="pin-spacer-top">↓ スクロール ↓</div>
<div class="pin-track">
<div class="pin-stage">
<div class="pin-slide" data-index="0">
<div class="pin-num">01</div>
<p class="pin-text">アイデアを<br>書き出す</p>
</div>
<div class="pin-slide" data-index="1">
<div class="pin-num">02</div>
<p class="pin-text">優先度を<br>整理する</p>
</div>
<div class="pin-slide" data-index="2">
<div class="pin-num">03</div>
<p class="pin-text">形にして<br>届ける</p>
</div>
</div>
<div class="pin-dots">
<span class="pin-dot active" data-i="0"></span>
<span class="pin-dot" data-i="1"></span>
<span class="pin-dot" data-i="2"></span>
</div>
</div>
<div class="pin-spacer-bot"></div>
</div>