スクロールに合わせて背景を動かすJavaScript

スクロールに合わせて背景画像を動かすコード

スクロールイベントをキャッチして、スクロール量に比例して background-position の値を変更する感じです。

CSS

body {
  background-image: url(画像のURL);
  background-size: cover;
}

画像が背景を覆うように cover に size をしておきます。

ここに transition などを入れると遅延効果みたいのも出せるかと思います。

JavaScript

window.addEventListener("load", function() {
  window.addEventListener("scroll", function() {

    var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight; //ドキュメントの長さ
    var scrollV = scrollH　- window.innerHeight; //ウィンドウの高さを引くことで実際にスクロールする量を取得
    var windowY = window.pageYOffset;

    document.body.style.backgroundPosition = (windowY / scrollV) * 100 +　"% 0";
  }, false);
}, false);

ドキュメント全体の長さと、スクロールをする量はウィンドウの高さ分だけズレがあるので scrollV のところで細かいですがズレを修正してます。

背景画像になんの工夫もありませんが、実際にこのページで背景を動かしています。背景が動くせいで非常に記事が読みにくいです。

まとめ

もう少し縦長のサイトで画像自体をゆっくり動かせばそれなりにオシャレな感じになるかもしれないエフェクトな気がします。画像サイズを調整することで、動きのスピードなど調整可能です。

高さなりスクロール量はピュアな JavaScript では少しめんどくさい記述になるので、jQuery のコードをよく見ますが、こちらでも書けますという記事でした。