web-dev-qa-db-ja.com

ウィンドウスクロールのjQueryは背景画像の位置をアニメーション化します

JQueryを使用してスクロール効果を達成しようとしています。バックグラウンドdivを100％のブラウザーウィンドウサイズに設定し、オーバーフローを非表示にしました。これには、およその大きな背景画像があります。 1500px x 2000px。

私が望む効果は、ユーザーがページを下にスクロールすると、背景画像がスクロール距離の割合で移動するため、ページを下に200pxスクロールするごとに、画像は同じ方向に10px移動します。

誰かが私を正しい方向に向けることができますか？これも可能ですか？ :)事前に感謝します。

更新

それ以来、@ Capt Otisによる提案のバリエーションを試しましたが、いまだに遊んでいるコードは次のように苦労しています：

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});

誰かが私が間違っていることを明らかにすることはできますか？

jqueryimagebackgroundscrolljquery-animate
19
mtwallet

どうぞ。背景は10％スクロールに設定されます。コードの10を変更すると、バックグラウンドスクロールレートを変更できます。

[〜＃〜] css [〜＃〜]

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
}

<div class="bg">
   <span>..</span>
</div>

JavaScript

$('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});

http://jsfiddle.net/Vbtts/ で動作例を確認してください
全画面表示の例については、このリンクをクリックしてください。 http://jsfiddle.net/Vbtts/embedded/result/

54
Hussein

これは私のために働いた：

Js：

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});

CSSの場合：

#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;

#mainは、背景画像を移動したいdivです。高さは必要ありません：html、bodyの場合は100％。

これは、複数の背景画像のバリエーションです。

5
stormwild

余分な背景divに煩わされたくない場合は、いくつかの例からまとめた私のコードを以下に示します。

$(window).scroll(function () {
    setBackgroundPosition();
})
$(window).resize(function() {
    setBackgroundPosition();
});
function setBackgroundPosition(){
    $("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px");
}

クロスブラウザーの問題にはMath.maxが必要です。また、「1920」を背景画像の幅に置き換えます

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
5
breez

これはそれをするかもしれません：

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})
2
Gareth

here を見て、ユーザーがページ上でどれだけスクロールしたかの例を確認してください。 $(this).scrollTop()？を参照してください

$（this）を参照するのではなく、背景divを使用してみてください。次に、.scroll関数を使用して、背景を移動する量を決定します。

コードは次のようになります。

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});
0
Capt Otis

CSSに2つの部分がある場合、+ =または-=を使用できるとは思わない。あなたができることがあります、それは少しトリッキーですが、それは動作します：

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        var bgpos = $("#div").css("background-position");
        var bgposInt = 0;
        if(bgpos.indexOf("px")!=-1) {
            bgpos = bgpos.substr(bgpos.indexOf("px")+3);
            bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
        }
        bgposInt += 10;
        $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
    }
});

このコードは、divのbackground-position（一番上の位置）から2番目の数値のみを取得し、それをintに変換し、10増やします。それから、divを新しい位置にアニメーション化します。

0
Cokegod