jquery - すべての画像サイズと要素の位置に対して視差効果を作成しようとしています

Question

私はCode.tutsplus の Parallax チュートリアルに従いましたが、これに似たものもいくつか見ました。ただし、要素の上部または下部に空白スペースが常に作成されるため、何らかの理由で完全に機能するチュートリアルはありません。

そこで、要素の高さと視差効果の速度に基づいて、要素の 'background-size' プロパティも取得するようにコードを変更することにしました。しかし、それでも正しく機能せず、下部に空白スペースが作成されます。

私のコードをチェックして、何が間違っているのか教えてください:

$('.parallax').each(function(){

    var $el = $(this),
        speed = $el.data('speed'),
        elHeight = $el.outerHeight(),
        wHeight = $(window).height(),
        elOffset = $el.offset().top;

    //Taking into account the amount the background would move and putting that into
    //background-size so there are no white spaces.
    var extraSize = (elHeight*speed)+elHeight;
    var percentage = (extraSize/elHeight)*100;
    $el.css({'background-size': percentage+'%'+' '+percentage+'%'});


    $(window).scroll(function() {
        var diff = $(window).scrollTop() + wHeight - elOffset;

        var yPos = -(diff*speed);
        var coords = '50% '+ yPos + 'px';
        $el.css({ backgroundPosition: coords });
    });
});

また、ここにcssがあります：

.parallax {
    background-image: url('http://lorempixel.com/1366/500');
    background-position: 50% 0;
    background-repeat: no-repeat;
}

私がここで間違っていることを教えてください。ありがとう