ちいつる

スクロール演出(応用)

パララックススクロール

地面・木・山の眺めから、スクロールに連れて空・雲・太陽の眺めへカメラが大きくパンするダイナミックなパララックス。近い層ほど速く動いて奥行きが出る。

ENGLISH

Parallax Scrolling

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

プレビュー

スクロール

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

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

<div class="par-root">
  <div class="par-stage">
    <div class="par-layer par-bg">
      <div class="par-sky"></div>
      <div class="par-sun"><span class="par-sun-core"></span></div>
      <div class="par-cloud par-c1"></div>
      <div class="par-cloud par-c2"></div>
      <div class="par-cloud par-c3"></div>
    </div>
    <div class="par-layer par-mid">
      <div class="par-mtn par-mtn-far"></div>
      <div class="par-mtn par-mtn-near">
        <span class="par-snow"></span>
      </div>
    </div>
    <div class="par-layer par-fg">
      <div class="par-nearhill"></div>
      <div class="par-tree par-t1"></div>
      <div class="par-tree par-t2"></div>
      <div class="par-tree par-t3"></div>
    </div>
    <div class="par-label">↓ スクロール</div>
  </div>
  <div class="par-filler"></div>
</div>

タグ

関連パーツ