スクロールに応じて背景画像を動かしたい

Question

スクロールに応じて背景画像を動かしたい

htmlで背景画像をスクロール量に連動させて動かしたいです。
（パララックスアニメーションのようなイメージです）

該当のソースコード

<div class="target">
    ターゲット１
</div>
<div class="target">
    ターゲット2
</div>
<div class="target">
    ターゲット3
</div>

各.targetにはbackground-imageをつけています。

jQuery(function($) {
    $(window).scroll(function() {
      $(".target").each(function(){
        var offset = $(this).offset().top / 40;
        $(this).css('background-position', 'right top -'+ offset + 'px');
    });
  });
});

試したこと

上記のコードではoffsetがスクロールに連動して変わってくれずに、固定値になってしまいます。
スクロールに連動させるにはどうしたらいいでしょうか。

Answer 1

上記のコードではoffsetがスクロールに連動して変わってくれずに、固定値になってしまいます。

「スクロールされている」要素からスクロール量を探しましょう。

【jQueryでスクロール位置を取得・設定する：scrollTop() | UX MILK】
https://uxmilk.jp/44962

Comments

[donkuri]

ありがとうございます。
早速参考サイトにならって

var offset = $(this).scrollTop() / 40;

に変えてみましたが、offsetが0のまま変わらなくなってしまいました。。。
何か間違えているでしょうか

[kei344]

this は書く位置によって意味が変わるので、どこに書いたかはわかりませんが、「スクロールされている要素」はwindowなので、もしeachの中にthisを書いているなら違います。

この手の挙動は自作することもありますが、ライブラリ等を探して使用するほうがよりよいことが多いです。

[donkuri]

ありがとうございます。

thisは難しいですね。。。
やはりパララックスのライブラリを探してみた方が良さそうですね。
ライブラリでできそうなものを探してみます。