ちいつる

スクロール演出(応用)

ピン留めスクロール

あるセクションが画面に固定されたまま、スクロール進行に応じて内部の要素(テキスト/数値)が切り替わる。position:sticky+スクロール進捗で内部をmorph。

ENGLISH

Pinned Scroll Section

  • JS
140スクロール演出(応用) の一覧 →

プレビュー

スクロール

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

コード(コピーして使えます)

<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>

タグ

関連パーツ