スクロール演出(応用)
スクロールズーム
スクロール量に応じて画像(グラデdivで代用)や見出しが拡大・縮小する。scrollイベント連動でscaleを変える。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード(コピーして使えます)
<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>