かわたま.net

Enjoy Creative! かわたまのwebメモ
rss twitter facebook

【jQuery】【パララックス】時間差スクロールで奥行きのある動作を実装する方法

2014 September 11

Tag:

それぞれのレイヤーごとのスクロール速度をずらことで、奥行きの感じられる動作を実装することができます。
今回は、jQueryを使って、背景画像の縦スクロールと横スクロールのパララックスを実装してみます。

・縦の時間差スクロールサンプルページ
・横の時間差スクロールサンプルページ

html

<body>
  <head>
    <link href=style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="scroll.js"></script>
  </head>
  <div id="scroll_bg01">
    <div id="scroll_bg02">  
      <div id="scroll_bg03">
      </div>
    </div>
  </div>
</body>

css

画面以上にコンテンツがないとスクロールバーが表示されませんので、仮でbg01にheightを設定しています。

// 縦スクロール
#scroll_bg01 {
  background-image: url(images/scroll_bg01.png);
  background-repeat: no-repeat;
  background-position: 10px 0px;
  height: 3000px;
}
#scroll_bg02 {
  background-image: url(images/scroll_bg02.png);
  background-repeat: no-repeat;
  background-position: 220px 0px;
  height: 3000px;
}
#scroll_bg03 {
  background-image: url(images/scroll_bg03.png);
  background-repeat: no-repeat;
  background-position: 440px 0px;
  height: 3000px;
}

// 横スクロール
#scroll_bg04 {
  background-image: url(images/scroll_bg01.png);
  background-repeat: no-repeat;
  background-position: 0px 10px;
  height: 3000px;
}
#scroll_bg05 {
  background-image: url(images/scroll_bg02.png);
  background-repeat: no-repeat;
  background-position: 0px 220px;
  height: 3000px;
}

scroll.js

【縦スクロールの場合の記述例】

・縦の時間差スクロールサンプルページ

$(function() {
    $(window).scroll(function(){
        var scroll = $(this).scrollTop(); // スクロール値を取得
        $('#scroll_bg01').css('background-position', '10px ' + parseInt( -scroll / 50 ) + 'px'); // 1/50のスピード
        $('#scroll_bg02').css('background-position', '220px ' + parseInt( -scroll / 10 ) + 'px'); // 1/10のスピード
        $('#scroll_bg03').css('background-position', '440px ' + parseInt( -scroll / 2 ) + 'px'); // 1/2のスピード
    }); 
});

scrollTopプロパティは、指定した要素のスクロールビューを、垂直方向にスクロールした上端からの距離を取得したり設定したりできます。
background-positionの値は、cssと同じように、’x y’の順にposition指定します。
‘x’で左からの数値(今回はそれぞれ 10px,220px,440px としています。）ここには数値、または中央に表示させたい場合は’center ‘を入れます。※数値の後に半角スペースを入れます。
‘y’で縦のスクロール値を指定しています。

【横スクロールの場合の記述例】

・横の時間差スクロールサンプルページ

$(function() {
    $(window).scroll(function(){
        var scroll = $(this).scrollTop(); // スクロール値を取得
        $('#scroll_bg04').css('background-position', parseInt( -scroll / 5 ) + 'px 0' + 'px');
        $('#scroll_bg05').css('background-position', parseInt( scroll / 3 ) + 'px 220' + 'px');
    }); 
});

-scrollで右から左へ、scrollで左から右へ移動します。