parallax fading один div в другой с Skrollr

Question

Я пытаюсь потушить 3 (полноэкранный) divs друг с другом, когда я прокручиваю.

Я пытаюсь использовать Skrollr (https://github.com/Prinzhorn/skrollr), и он имеет вид работы, но с одной странной проблемой.

Когда я прокручиваю вниз изображения, исчезает, но «.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; 
} 

Любые идеи, что может быть не так?

Answer 1

<div class="welcome-bg" data-0="opacity:1;" data-100p="opacity:0;"></div> 
<div class="intro-bg" data-100p="opacity:1;" data-200p="opacity:0;"></div> 

и добавить

$(window).resize(function() { 
var maxWidth = $(window).width(); 
var maxHeight = $(window).height(); 
$('.welcome, .intro, .sign-up').css({ 
     width: maxWidth, 
     height: maxHeight 
}); 
}); 

Посмотрите: http://jsfiddle.net/58s7c1sf/

Answer 2

взглянуть на https://gist.github.com/pascalmaddin/5756515

Это очень просто, и я надеюсь, что это поможет вам