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

ナビゲーションをスキップする

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

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

Posted at November 15,2007 12:33 AM
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 このページの先頭に戻る

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

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

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

１．１ (X)HTML

１．２ CSS

１．３ JavaScript

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

２．１ (X)HTML

２．２ CSS

２．３ JavaScript

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

３．１ (X)HTML

３．２ CSS

３．３ JavaScript