[JS]既存のページに数行加えるだけでパララックススクロールを実装できるチュートリアル

jQueryとほんの数行のスクリプトでパララックススクロールのエフェクトを与えるデモを紹介します。

Parallax scrolling background

デモはスクロールすると、コンテンツと背景画像がいい感じのタイミングでずれてスクロールします。

実装は簡単です。
既存のページにもこれなら簡単に組み込めると思います。

HTML

パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。

<div class="background"></div>

<div class="wrapper">
  <h1 class="pageTitle">見出しLv1</h1>
  <h2 class="pageSubTitle">見出しLv2</h2>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
</div>

<div class="slogan">
  <h2 class="sloganTitle">
    Parallax scrolling
  </h2>
</div>

<div class="wrapper">
  <h1 class="pageTitle">見出しLv1</h1>
  <h2 class="pageSubTitle">見出しLv2</h2>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
</div>

<div class="wrapper">
  <h1 class="pageTitle">見出しLv1</h1>
  <h2 class="pageSubTitle">見出しLv2</h2>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
</div>

CSS

スタイルシートは、先頭の空divに背景画像を指定します。

.background {
  background: 
    url("http://cdn.wallwuzz.com/uploads/autumn-fantasy-wallpapers-background-desktop-nature-maple-wallpaper-sunset-array-wallwuzz-hd-wallpaper-5179.jpg")
    repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1
}

JavaScript

jquery.jsを外部ファイルとして記述し、下記のスクリプトを記述します。

<script>
$(window).scroll(function(e){
  parallax();
});

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.background').css('top',-(scrolled*0.2)+'px');
}
</script>