使えるパララックスがなかなかなくて、MITで改変

かなり長い間悩まされてるパララックスが解消。
色々とプラグインはあるけど、満足いかない。
元画像が予想以上に拡大されたり、微調整がムズかったりと苦労しましたが、本日解消。またもやChatGPT様のおかげ

元コード（parallax-background.js）
https://github.com/aliihsanural/parallax-background

これは簡単で、background-imageで使える。
つまり、cover／fixと同じ感覚で、iphoneでも動くというもの。
確かに、すごく簡単。

・・・ただし、レスポンシブに不満が残る。
私は通常、PCとSPの背景画像は別のものを用意している。
横長と縦長でトリミングを変えて使用。
横長のものをセンターで合わせただけではSPで大ずれすることがある。

このままじゃぁ、できない。
ってことで、いつものChatGPT様に登場してもらう。

画像ファイル名にPCの時は末尾に_PCをつけて、スマホの時は_SPをつける。でも拡張子は何が来るかはわからないから分離してね！

改変前コード

c.css({
'position'            : 'absolute',
'background-image'    : 'url(' + settings.parallaxBgImage + ')',
'background-position' : settings.parallaxBgPosition,
'background-repeat'   : settings.parallaxBgRepeat,
'background-size'     : settings.parallaxBgSize,
'width'               : d[0],
'height'              : d[1],
'transform'           : 'translate3d(' + e[0] + 'px, ' + e[1] + 'px, ' + e[2] + 'px)',
'z-index'             : '-1'
});

改変後コード

c.css({
	'position': 'absolute',
	'background-position': settings.parallaxBgPosition,
	'background-repeat': settings.parallaxBgRepeat,
	'background-size': settings.parallaxBgSize,
	'width': d[0],
	'height': d[1],
	'transform': 'translate3d(' + e[0] + 'px, ' + e[1] + 'px, ' + e[2] + 'px)',
	'z-index': '-1'
});

var fileName = settings.parallaxBgImage.substring(0, settings.parallaxBgImage.lastIndexOf('.'));
var fileExtension = settings.parallaxBgImage.substring(settings.parallaxBgImage.lastIndexOf('.'));
var modifiedFileName;

if (window.innerWidth <= 600) {
	modifiedFileName = fileName + '_SP' + fileExtension;
} else {
	modifiedFileName = fileName + '_PC' + fileExtension;
}

c.css('background-image', 'url(' + modifiedFileName + ')');

'background-image' : 'url(' + settings.parallaxBgImage + ')',
の処理を変えてもらった。
完璧！ChatGPT！

設置が簡単！簡単ということは他とぶつからない。
幸せだ〜。

すぐに追記）

//'background-position': settings.parallaxBgPosition,
//'background-size': settings.parallaxBgSize,

ここはコメントアウトして、外部cssでコントロールした方がデザインの調整がしやすい。