0

我试图在滚动时将 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;
}

有什么想法可能是错的吗？

4

2 回答 2

3 
<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>

and add 

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

Look: http://jsfiddle.net/58s7c1sf/

于 2014-09-25T14:03:42.650 回答
0

take a look at https://gist.github.com/pascalmaddin/5756515

It is very simple and i hope it will help you to

于 2014-03-06T17:59:17.940 回答