jQueryで背景画像にも対応したパララックス(視差効果)を作る

こんにちは、タクゾウです。
パララックスサイト作る際、「position」か「background-position」を調節することがほとんどなので、
引数によって、どちらも調節できるようにまとめました。
個人的にまとめてるので関数にしてますが、時間があればプラグイン化にしてみたいです。

DEMO

背景画像と、画像が引数に入れた値によって変動するようになっています。

参考 Parallax EffectParallax Effect

コード

JavaScript
/*
 * 視差効果
 * @param {string} 動かす要素名
 * @param {number} 移動量を指定 0.05〜2の間が推奨 下に移動させたい場合は「-」を指定
 * @param {string} 動かす要素がpositionかバックグラウンドか? 「posi」 or 「bg」
 * @return none
 */
function parallaxEffect(parallaxElem, amount, type){
  if(arguments.length !== 3){
    throw new Error('引数が不正です');
  }
  switch(type){
    case 'posi'://「top」の要素を移動させる。
    $(parallaxElem).each(function(i, elem){
      var scrollTop = $(elem).offset().top; //初期値を取得
      var styleTop = parseFloat($(elem).css('top')); //既存のtopの値を取得
      $(window).scroll(function() {
          var value = $(this).scrollTop(); //スクロールの値を取得
          var posiTop = (scrollTop - value) * amount + styleTop;
          $(elem).css('top', posiTop);
      });
    });
    break;
    case 'bg'://「background-position-y」の要素を移動させる。
    $(parallaxElem).each(function(i, elem){
      var scrollTop = $(elem).offset().top; //初期値を取得
      var styleTop = parseFloat($(elem).css('background-position-y')); //既存のbackground-position-yの値を取得
      console.log(styleTop);
      $(window).scroll(function() {
          var value = $(this).scrollTop(); //スクロールの値を取得
          var posiTop = (scrollTop - value) * amount + styleTop;
          $(elem).css('background-position-y', posiTop);
      });
    });
    break;
  }
}

//画像を読み込んだタイミングで実装
$(window).on("load",function(){
  parallaxEffect(".parallaxPosi01", 0.6, "posi");//「.parallaxPosi01」の要素のpositionを動かす
  parallaxEffect(".parallaxPosi02", 0.4, "posi");
  parallaxEffect(".parallaxBg01", 0.2, "bg");
});

使用方法

使用方法は、簡単です。
parallaxEffect()メソッドで関数をよびだし、引数に動かす処理を記述するだけです。
引数の意味は下記になります。

第1引数:parallaxElem

動かす要素名を指定する引数です。classで複数に割り当てても問題ありません。

第2引数:amount

要素の移動量を指定してください。 画面のサイズなども考えると0.05〜2の間がちょうどいいと思います。
移動方向を上下逆にしたい場合は、「ー」マイナスをつけてください。

第3引数:type

変動する値が「top」なのか、「background-position-y」なのかを指定してください。
「top」の場合は 「posi」をしてい、 「background-position-y」の場合は「bg」を指定してください。

適応させる要素のtopの値を考慮して処理をするため、細かい調整をする場合はスタイルのtopを調節してください。

注意
pxでの値を変動させることを前提で作っているため、スタイルでtopを調節する際「%」ではなく、「px」を使用してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA