jquery - Skrollrを使用してあるdivを別のdivにフェードする視差

Question

スクロールするときに 3 つの (フルスクリーン) div を互いにフェードしようとしています。

私は Skrollr ( https://github.com/Prinzhorn/skrollr ) を使用しようとしてきましたが、うまくいきましたが、奇妙な問題が 1 つあります。

下にスクロールすると画像が消えますが、「.intro-bg」はページの上部から始まり、ページの約半分まで移動します。「.sign-up-bg」は問題なく、スクロールせず、上部に固定されたままです。「welcome-bg」も同様です。ですから、真ん中だけが苦痛です。

http://jsfiddle.net/9HFd9/を複製しようとするフィドルを作成しましたが、まったく同じではありませんが、ここにもスクロールの問題があります。

コードは次のとおりです。

HTML:

<div class="content">
    <div class="welcome">Welcome</div>
    <div class="intro">Intro</div>
    <div class="sign-up">Sign Up</div>
</div>
<div class="welcome-bg" data-0="opacity:1;" data-500="opacity:0;"></div>
<div class="intro-bg" data-500="opacity:1;" data-1000="opacity:0;"></div>
<div class="sign-up-bg" ></div>

Javascript:

skrollr.init({
    smoothScrolling: true,
    forceHeight: false
});

var maxWidth = $(window).width();
var maxHeight = $(window).height();

$(document).ready(function(){
    $('.welcome, .intro, .sign-up').css({
        width: maxWidth,
        height: maxHeight
    });
});

CSS

.welcome-bg, .intro-bg, .sign-up-bg{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:100%;
}

.welcome-bg{
    background: blue url('http://wallpicshd.com/wp-content/uploads/2013/06/Landscape-04-HD-Wallpaper.jpg') center center fixed;
    background-size:cover;
    z-index:-2;
}
.intro-bg{
  background: green url('http://www.hdwallpapers.in/walls/sunflower_landscape-wide.jpg') center center fixed;
  z-index:-3;
}
.sign-up-bg{
  background: red url('http://www.hdwallpaperstop.com/wp-content/uploads/2013/05/Beautiful-Landscape-Pictures-of-nature.jpg') center center fixed;
  z-index:-4;
}

何が間違っているのでしょうか？