多个div的不透明度滚动动画

Question

我已经找到了一个 jQuery 脚本，当我向下滚动（或当 div 到达顶部时）时，它会将我的第一个 div 的不透明度从 1 更改为 0。

但现在我想让下一个 div 在到达页面顶部时也这样做，而不是同时进行。

以下是部分代码：

这是 HTML 部分：

<div id="wrap">

  <section id="logo">
    <img src="images/layout/logo.png"> 
  </section> <!-- logo -->

  <section id="intro">  
    <img src="images/layout/welcome.png">

    <p><h2>Text text text text here here here here</h2></p>
  </section> <!-- intro -->

</div>

然后是我的 jQuery 脚本，目前仅适用于徽标部分。

var divs = $('#logo');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/100) });
});

为了完全清楚发生了什么，我给你留下了我当前页面的链接：

www.hyker.be/opacity

我只是希望“靠近一点”的 div 与“标志”的 div 做同样的事情，等等。

Answer 1

我会在开始时将它们全部添加，并且只有在它们在范围内时才会淡出它们。

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

更新

这似乎效果更好。基于对象的中心而不是顶部淡入淡出。

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      var height = $(this).outerHeight();
      offset = offset + height/2;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

资源

• http://api.jquery.com/offset/