視差効果に関するレンダリングの問題

Question

window.onscrollとscrollTopを使用して視差効果を作成しようとしていますが、ビューポートがレンダリングされた後にオンスクリーンが表示されているようなレンダリングの問題が発生しています。 from this example（コードが添付されています）のように、ボックスの動きは不安定で不安定です。

動作はすべてのWebKitベースのブラウザとFireFoxで同じです。それは事前に作られたものではなく、 "再発明し、" ホイールを使用して価値がある場合

はJavaScript

$(document).ready(function() { 
    $('.box').each(function() { 
    $(this).data('y', $(this).offset().top); 
    }); 
}); 

$(window).scroll(function() { 
    var scroll = $(this).scrollTop(); 

    $('.box').each(function() { 
    var parallax = $(this).data('parallax'); 

    if (parallax) { 
     var y = $(this).data('y'); 
     var offset = (scroll - y) * parallax; 

     $(this).css('-webkit-transform', 'translateY(' + offset + 'px)'); 
    } 
    }); 
}); 

マークアップ

<div class="red box">Lorem ipsum dolor sit amet.</div> 
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div> 
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div> 

Answer 1

だけ不思議？

http://joelb.me/scrollpath/