ちいつる

スクロール演出(応用)

スクロールズーム

スクロール量に応じて画像(グラデdivで代用)や見出しが拡大・縮小する。scrollイベント連動でscaleを変える。

ENGLISH

Scroll-Linked Zoom

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

プレビュー

スクロール

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

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

<div class="szoom-root">
  <div class="szoom-spacer-top">↓ スクロール ↓</div>
  <div class="szoom-stage">
    <!-- .szoom-img は <img> タグに置き換えて使用可 -->
    <div class="szoom-img"></div>
    <h2 class="szoom-title">ZOOM</h2>
  </div>
  <div class="szoom-spacer-bot"></div>
</div>

タグ

関連パーツ