スクロールした時に、背景として表示させている二つの画像を左右に移動させたい(jQuery使用)

<最終的にどうしたいのか？>
現在、二つの画像を並べて1枚の背景画像として表示させています。
スクロールした時に、左側の画像は左側に、右側の画像は右側に流れていくようにしたいです。

↓TOPイメージ↓

↓画像の分割は以下のようになっています↓

<問題点>
現在のjsファイルだと、画像が二つとも右側に流れていってしまいます。

<参考にしたサイト>
背景画像を複数指定する方法（https://www.dataplan.jp/blog/css/3225）

<実施したこと>
1.jsファイルで背景を両方とも右に動かすことはできました。
2.左側の背景をDOMの数え順として0とし、スクロールした時に左に行く指示（マイナス）を実行しましたが、両方等も動かなくなってしまいました。
（一番下に記載しています）

各コード、以下です。

CSS

CSS
1.main {
2	width: 100%;
3	height: 901px;
4	margin: 0 auto;
5	text-align: center;
6	position: relative;
7	background-image: url(img/module/main_bg01.png),
8					  url(img/module/main_bg02.png);
9	background-repeat: no-repeat,
10				       no-repeat;
11	background-position: center left,
12						 center right;
13	background-size: 100vw;
14	background-attachment: fixed;
15}

↓両方とも右に動いていた時のコード

jQuery
1(function ($) {
2    
3  'use strict';
4    
5    let scrollPosi = 0;
6  $(window).scroll(function () {
7    scrollPosi = $(document).scrollTop();
8        $('.main').css('background-position-x', + scrollPosi + 'px');
9  });
10
11})(jQuery);

↓両方とも動かなくなってしまった時のコード

jQuery
1(function ($) {
2    
3  'use strict';
4    
5    let scrollPosi = 0;
6  $(window).scroll(function () {
7    scrollPosi = $(document).scrollTop();
8        $('.main').css('background[0]-position-x', + scrollPosi + 'px'),
9        $('.main').css('background[1]-position-x', - scrollPosi + 'px');
10  });
11
12})(jQuery);

多くのサイトを検索していたのですが、2枚の画像をスクロールで左右別々に移動させる方法が見つけられず、進められていない状況です。
どなたか、分かる方がいらっしゃいましたら是非ご教示いただきたいです。
よろしくお願いいたします。

↓以下追記↓
スクロールし始め

スクロール後半

行動規範の内容に同意します

回答1件

ベストアンサー

背景画像はDOMではないですから配列のように指定はできません。
そもそもCSSに配列の概念はありません。

CSSで複数の背景画像を設定する場合はカンマで区切って指定しますので、jQueryでCSSを設定するときもそうします。

js
1(function ($) {
2  'use strict';
3
4  let scrollPosi = 0;
5  $(window).scroll(function () {
6    var scrollPosi = $(document).scrollTop();
7    var rightPosi = $(window).width() / 2;
8    $('.main').css('background-position-x',
9                   '-' + scrollPosi + 'px,' + 
10                   (rightPosi + scrollPosi) + 'px');
11  });
12
13})(jQuery);

背景画像の斜めカットをどのようにしているか不明なので、
とりあえず画面幅の半分の画像を左右に並べる仕様にしてます。

CodePenサンプル

コメントを受けて

同じ大きさの透過画像を重ねているなら、rightPosi を無しにすればうまくいくと思います。

js
1(function ($) {
2  'use strict';
3
4  let scrollPosi = 0;
5  $(window).scroll(function () {
6    var scrollPosi = $(document).scrollTop();
7    $('.main').css('background-position-x',
8                   '-' + scrollPosi + 'px,' + 
9                    scrollPosi + 'px');
10  });
11
12})(jQuery);

投稿2020/03/28 16:19

編集2020/03/29 00:55

hatena19

総合スコア34075

Teruaki0131

2020/03/28 19:24

素早いご回答ありがとうございます！ Photoshopで、画面上での表示サイズと同じサイズ（1440px×900px）のキャンバスを作り、それを上から斜めに切って、右側だけの画像と左側だけの画像をpngで書き出ししています。いただいたコードで試すと、左の画像は思った通りの動きになったのですが、右の画像はスクロールした瞬間に1枚目の場所まで移動してしまい、スクロールの後半にはもう見えなくなってしまっていました。 ※画像は追記させていただきました。これは何が原因なのかわかりますでしょうか、、。お時間ございましたら、ご回答をお待ちしております。