0

jQueryで背景位置を変更することに問題があります。私が取り組んでいる Web サイト ( http://www.jeroenrood.nl/GortzFruit ) には、スクロール アニメーション (スクロール ホイールまたはアンカー クリックのいずれか) があり、背景の img タグの上部の位置はスクロールよりもゆっくりと変化します。速度。

これにより、Chrome と Firefox では滑らかな視差スクロール効果が作成されますが、Internet Explorer では作成されません。IE では (バージョンに関係なく)、この効果が頻繁に途切れます (前述のリンクで確認できます)。

これは、視差スクロール効果 (HTML) に関して、私が使用するコードです。

<div style='height:1000px;background-color:#333;position:relative;' id='page1'>

    <img src='images/bg1.png' alt='' style='display:inline;position:absolute;top:-60px;left:0px;width:100%;z-index:0;' class='background' />   

</div>

これは javascript/jQuery コードです。

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();

$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = -60 + ((scrollTop - page1)*0.8);
            $('#page1 .background').css('top',newOffset);
        }
});

どういうわけかIEは画像のこの位置を処理して適用するのが遅れているようです。IE に Chrome や Firefox と同様のスムーズなスクロール効果を持たせる方法を知っている人はいますか?

前もって感謝します、

ジェローン

編集：

わかりました、私は解決策を見つけようとしています！

background-attachment:fixed を試しましたが、IE で途切れることはありませんでした。次に、この css を視差効果と組み合わせることができると考えました。IE のトランジションには途切れの原因となるギャップがあるため、background-attachment:fixed でそれらをブリッジできるかもしれません。

これはうまくいくようです！今では IE の流暢なアニメーションにもなっています。大規模な背景画像でも。

これはコードです（HTML）：

<div style='height:1000px;background-color:#333;position:relative;text-align:center;' id='page1'>

    <div class='background' style='display:inline;position:absolute;top:-60px;left:0px;height:1000px;width:2000px;z-index:0;background-image:url(images/bg1.png);background-repeat:no-repeat;background-position:left -60px;background-attachment:fixed;'></div>   

</div>

そして、これは関連する javascript/jQuery コードです:

var page1 = $('#page1').offset().top;
var windowHeight = $(window).height();
$(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        //if the first page is in the viewport
        if((page1 <= (scrollTop+windowHeight))&&((page1+1000) >= scrollTop)){
            newOffset = "left "+ (-60 - ((scrollTop - page1)*0.2))+"px";
            $('#page1 .background').css('background-position',newOffset);
        }
});
4

1 に答える 1

2

この画像をもっと小さくしてください。2000×2386 ピクセルで 8.3MB の大きさです。1000×1193ピクセルにしてJPEGに変換できます。JPEG は PNG よりも写真を圧縮します。ブラウザーは、大きな画像よりも小さな画像をはるかに高速に処理できます。

于 2013-01-08T16:12:31.000 に答える