3

次のコードは、一方のdivのスクロールがもう一方のdivよりも遅いという印象を与えるために機能していますが、スクロール時に背景のdivが少し揺れるという問題があります。

なぜこれが起こっているのか、そしてどうすればそれを修正できるのか、何か考えはありますか？

編集：これはすべてのブラウザで問題になるとは限らないので、私は今、この効果を達成するためのより安全な方法を探していると思います...

http://jsfiddle.net/KRv5V/

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      var divam = 1.2;
      $(".sky").css({
          "top":scrollTop/divam+"px",
          "height":10000-(Math.round(scrollTop/divam))+"px"
      });
    });
});
</script>

<style type="text/css">
.sky {
    height:10000px; 
    width:100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
    z-index:1;
}

.red {
    height:10000px; 
    width:50%; 
    position:absolute; 
    top:0px; 
    right:25%; 
    background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
    z-index:2; 
    background-position:center;
}
</style>

</head>

<body>

<div class="sky"></div>
<div class="red"></div>

</body>
4

2 に答える 2

3

私はこれにいくつかの変更を加えて、プラグインのすべての機能が本当に必要ではないので、スムーズに動作するようになりました。適応。

これが私の改善されたコードです。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var divam = 20;
        $("body").css({
            "background-position":"0px -"+scrollTop/divam+"px"     
        });
        $(".red").css({
            "margin-top":"-"+scrollTop+"px"
        });
    });
});
</script>

<style type="text/css">
    body {
        background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
        background-attachment: fixed;
        height:21000px;
    }

    .red {
        height:10000px; 
        width:50%; 
        position:fixed;
        top:400px;
        left:25%;
        background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
        background-position:center;
        border-bottom:10px solid #000;
    }
</style>

</head>

<body>

    <div class="sky"></div>
    <div class="red"></div>

</body>
于 2013-01-09T10:38:35.873 に答える
2

「視差スクロール」効果を達成しようとしています。このチュートリアルやこのドキュメントなど、いくつかの記事をご覧になることをお勧めします。さらにサポートが必要な場合は、このデザインでいくつかのサイトを作成しました。

于 2013-01-06T22:40:59.213 に答える