小粋空間: Parallax Backgrounds で背景画像のスクロール速度を変える

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

2007年11月15日

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

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

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

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

サンプル

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

以下、サンプルを例に、

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

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

１．ひとつの背景画像を縦スクロール

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

１．１ (X)HTML

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

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

１．２ CSS

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

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

１．３ 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（縦）です。
背景画像の高さは利用する画像に依存し、スクロール方向はスクリプト内で取得した変数をそのまま設定するだけですので、実際に値を変更できるのはスクロール速度のみです。

２．複数の背景画像を縦スクロール

２．１ (X)HTML

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

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

２．２ CSS

２．１で設定した 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);  
}

２．３ 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"; 
  }
}

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

３．ひとつの背景画像を横スクロール（blockquote内）

３．１ (X)HTML

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

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

３．２ CSS

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

３．３ 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";
  } 
}

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

Posted by yujiro

« 「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する | Main | CORESERVER（CORE-A）移行後の感想とコメント投稿エラーについて »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

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

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

小粋空間 - a cheap joke and a play on words site

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

１．ひとつの背景画像を縦スクロール

１．１ (X)HTML

１．２ CSS

１．３ JavaScript

２．複数の背景画像を縦スクロール

２．１ (X)HTML

２．２ CSS

２．３ JavaScript

３．ひとつの背景画像を横スクロール（blockquote内）

３．１ (X)HTML

３．２ CSS

３．３ JavaScript