Question

当我滚动时，我试图将3个（全屏）div相互淡化。

我一直在尝试使用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

这很简单，我希望它会帮助你

视差用Skrollr将一个div淡入另一个div

2 个答案: