スクロールして下にいくのに合わせて背景画像の位置を変更するjavascriptのコードを教えて下さい。


外部CSSにてbodyに背景画像を指定しています。

body {
background-image: url(../img/base/●●.png);
background-repeat: no-repeat;
background-position-x:50%;
  background-position-y:1%;
}

スクロールして一番下まで行った際に背景画像の「y軸」の高さを変更したいのです。
下に行ったタイミングでいきなり変わるのではなく、徐々に変わっていき、最終的に一番下までスクロールしたら希望の高さに変更できる形が理想です。

jquery等で可能でしょうか?

よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2016/05/26 00:34:03
  • 終了:2016/05/26 15:52:05

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/05/26 11:34:25

ポイント200pt

こんな感じでできます。

(function() {
    var is_support_only_y;
    var X_POS = "50%";

    function set_background_position() {
        var b_ = document.body;
        var y_pos_r = b_.scrollTop / (b_.scrollHeight - b_.clientHeight);
        var y = b_.scrollTop + b_.clientHeight / 2 - (b_.clientHeight / 2) * y_pos_r;
        if (is_support_only_y) {
            b_.style.backgroundPositionY = y + "px";
        } else {
            b_.style.backgroundPosition = X_POS + " " + y + "px";
        }
    }

    window.addEventListener("DOMContentLoaded", function() {
        is_support_only_y = document.body.style.backgroundPositionY;
        if (is_support_only_y) {
            b_.style.backgroundPositionX = X_POS;
        }
        window.addEventListener("scroll", set_background_position);
        set_background_position();
    });
})();

Firefox では、background-position-y を単独で指定できるのは、まだ先のようなので、その判定も入れています。

実際にどのように位置を調整したいかが質問の文面からは分からなかったので、初期状態では背景画像の頭がページの真ん中に来ていて、最後までスクロールすると表示領域の頭にくるように、スクロールした量に合わせて徐々に移動するようにしています。

こんな感じの動作です。
https://jsfiddle.net/03q2z5xv/embedded/result/




追記です。

実際にやりたい位置調整は、初期状態ではトップにある背景画像が、最後までスクロールすると、30pxほど下に下がるというものです。

一行、変更してます。

(function() {
    var is_support_only_y;
    var X_POS = "50%";

    function set_background_position() {
        var b_ = document.body;
        var y_pos_r = b_.scrollTop / (b_.scrollHeight - b_.clientHeight);
        var y = b_.scrollTop + 30 * y_pos_r;	// ★ここを変えました
        if (is_support_only_y) {
            b_.style.backgroundPositionY = y + "px";
        } else {
            b_.style.backgroundPosition = X_POS + " " + y + "px";
        }
    }

    window.addEventListener("DOMContentLoaded", function() {
        is_support_only_y = document.body.style.backgroundPositionY;
        if (is_support_only_y) {
            b_.style.backgroundPositionX = X_POS;
        }
        window.addEventListener("scroll", set_background_position);
        set_background_position();
    });
})();

jsfiddle の方でも、変更したものを確認してみました。
https://jsfiddle.net/x5ahwgzp/embedded/result/

他16件のコメントを見る
id:a-kuma3

ああ、jsfiddle の方のソースでしたか。
70% 位置に持ってくるには、以下のようにしてください。

        var b_ = document.body;
        var st = b_.scrollTop;
        var sh = b_.scrollHeight;
        var ch = b_.clientHeight;
        // フレームの中だと上手くいかない...
        st = -b_.getBoundingClientRect().top;
        sh = b_.scrollHeight;
        ch = window.innerHeight
        var y_pos_r = st / (sh - ch);
//      var y = st + 30 * y_pos_r;
        var y = st + ch * 0.7 * y_pos_r;    // ★ここ

ソースのコメントでちょろっと書いただけですが、フレームの中で動作させるのでなければ、以下のような感じでいけます。

        var b_ = document.body;
        var st = b_.scrollTop;
        var sh = b_.scrollHeight;
        var ch = b_.clientHeight;
//フレームの中じゃなければ、以下の 3行は不要
//      // フレームの中だと上手くいかない...
//      st = -b_.getBoundingClientRect().top;
//      sh = b_.scrollHeight;
//      ch = window.innerHeight
        var y_pos_r = st / (sh - ch);
//      var y = st + 30 * y_pos_r;
        var y = st + ch * 0.7 * y_pos_r;    // ★ここ
2016/05/31 10:22:33
id:kamefactory

ありがとうございます!
動きました!

何度もすいませんでした。
またよろしくお願いします。

2016/06/01 22:43:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません