[js]背景画像固定するならいっそのことパララックスの方が楽

後付のケース考えたら「jarallax」が楽かも。

どういうことか
jarallaxという選択肢

どういうことか

背景画像を固定したかったらこれを入れる。

.bg{
    background-attachment: fixed;
}

だけどiPhoneのブラウザに実装されてないから、PC環境限定みたいなところがある。

だから対策として、PCとSPで使い回すんじゃなくてそれぞれの構築をしましょうねみたいなことになる。

正直だるい。

なんで賑やかしにそこまでのリソースを割く必要があるのか。

だったらもう最初から使わなくて良くないか。

折角だからjsでパララックス仕様にすれば良いんじゃないの。

jarallaxという選択肢

結構前からあって、公式ページもあったんだけどドメイン失効して今はGithubとかcdnから引っ張る感じになってる。

組み方は簡単。

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
    <script defer>
        jarallax(document.querySelectorAll('.jarallax'), {
            speed: 0.2
        });
    </script>
</head>
<body>
<section class="jarallax">
    <div class="jarallax-img"></div>
</section>
</body>

画像の指定はbackground-imageでやる。
htmlにstyleで書いてもいいけどあんまり好きじゃないのでcss上で書きたい。

.jarallax-img{
    background-image: url(img/bg.jpg);
}

画像の位置の指定とかをしたければ通常のbackgroundと同じ事をする。

.jarallax-img{
    background-image: url(img/bg.jpg);
    background-position: center;
}

画像の表示についてあれこれするだけ。
js側で背景要素の配置周りをやってくれてるからマジで使い勝手が良い。

オプションもまあ色々あるけど、パララックスの速度をいじるくらいで良いんじゃないですかね。