Parallax Backgrounds で背景画像のスクロール速度を変える

Parallax Backgrounds で背景画像のスクロール速度を変える

Posted at November 15,2007 12:33 AM
Tag:[JavaScript]

背景画像のスクロール速度を変えることで、コンテンツと背景画像で遠近感を演出することができるスクリプト「Parallax Backgrounds」を紹介します。

Parallax Backgrounds

公式サイトのサンプルでは、スピードが異なる2つの背景画像を組み合わせているので、やや奇抜な印象を受けますが、背景を遠方として捉えたイメージで作り直したサンプル(単に雲を除いただけ)をご覧頂ければ、シンプルな遠近感の動きを楽しめます。

サンプル

サンプル途中にある引用(blockquote)部分は、横スクロールで背景画像のスクロール速度が変わります。

以下、サンプルを例に、

  • ひとつの背景画像を縦スクロール
  • 複数の背景画像を縦スクロール
  • ひとつの背景画像を横スクロール(blockquote内)

の3通りについて設定方法を説明します。

1.ひとつの背景画像を縦スクロール

ひとつの背景画像をスクロールする場合は次のように設定します。

1.1 (X)HTML

背景を表示する要素に ground という id 属性値を付与。属性値の名称は何でも構いませんが、後で設定する CSS と JavaScript で同じ名称にする必要があります。

<body id="ground">
  :
</body>

1.2 CSS

1.1で設定した id 属性に下記のスタイルを与えます。

#ground {
    background-image: url(bg-green.gif);
    background-repeat: repeat;
    background-attachment: fixed;
}

1.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
    window.onscroll = function() {
        var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
  
        var ground = document.getElementById('ground');
        var groundparallax = calcParallax(53, 8, posY);
        ground.style.backgroundPosition = "0 " + groundparallax + "px"; 
    }
}

calcParallax(tileheight, speedratio, scrollposition) に設定するパラメータの内容は下の通りです。

tileheight:背景画像の高さ
speedratio:スクロール速度、1が通常スクロールで、1より大きいと遅くなり、小さくすると早くなる
scrollposition:スクロール方向

サンプルでは背景画像の高さ53px、スクロール速度8、スクロール方向はY(縦)です。
背景画像の高さは利用する画像に依存し、スクロール方向はスクリプト内で取得した変数をそのまま設定するだけですので、実際に値を変更できるのはスクロール速度のみです。

2.複数の背景画像を縦スクロール

2.1 (X)HTML

背景を表示する要素に ground という id 属性値に加え、clouds という id 属性値を付与します。

<body id="ground">
  <div id="clouds">
  :
  </div>
</body>

2.2 CSS

2.1で設定した id 属性にそれぞれ下記のスタイルを与えます。

#ground {
    background-image: url(bg-green.gif);
    background-repeat: repeat;
    background-attachment: fixed;
}
#clouds {
    background-image: url(clouds.png);
    background-repeat: repeat;
    background-attachment: fixed;
}
* html #clouds {
  /* because IE6 can't do transparent PNGs for backgrounds */
  background-image: url(clouds.gif);  
}

2.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
  window.onscroll = function() {
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
 
    var ground = document.getElementById('ground');
    var groundparallax = calcParallax(53, 8, posY);
    ground.style.backgroundPosition = "0 " + groundparallax + "px"; 
 
    var clouds = document.getElementById('clouds');
    var cloudsparallax = calcParallax(400, .5, posY);
    clouds.style.backgroundPosition = "0 " + cloudsparallax + "px"; 
  }
}

お分かりのように、複数の背景を制御する場合は、1.3項の後半に現われるソースコードを、変数名を変更して必要分作成しています。

3.ひとつの背景画像を横スクロール(blockquote内)

3.1 (X)HTML

以下のように blockquote 属性に id 属性値を設定します。またスクロール設定のための class 属性も与えています。

<blockquote id="javascriptcode" class="scrollcode">~</blockquote>

3.2 CSS

.scrollcode {
    overflow:auto;
    white-space:nowrap;
}
#javascriptcode {
    background-image: url(bg-greenwhite.gif);
    background-repeat: repeat;
}

3.3 JavaScript

下記のスクリプトを script 要素で括り、head 終了タグの直前に配置します(外部ファイルにしても構いません)。

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
  document.getElementById('javascriptcode').onscroll = function() {
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
    var j = calcParallax(53, 16, posX);
    console.log('scroll js: '+ j);
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  } 
}

1.3や2.3と異なるのは、window.onscroll プロパティではなく、取得 id 属性のonscroll プロパティで動作している点です。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)