使用航点插件在滚动时将元素淡入和淡出视口

Question

有一段时间我一直对以下问题感到困惑。基本上我有垂直堆叠的DIV，所有相同的特性和CSS类（.ver​​t-container）。

• 向下滚动时，顶视图DIV的不透明度随着离开视口顶部而减小。
• 向下滚动时，底部可视DIV的不透明度随着进入视口而增加。

顶级DIV的这种影响渐渐消失，最后逐渐消失，以继续所有这些DIV。

我一直试图通过jQuery waypoints plugin和渐弱的不透明度来实现这一目标。

任何能够帮助我的人都会非常感激。到目前为止，为了起点，我将发布我的非常不完整的代码。

$(document).ready(function(){
$('.vert-container .inner').waypoint({
  handler: function() { 
    $('.vert-container .inner').stop().animate({ "opacity": 0.2 }); // Fade out the DIV that is leaving viewport
  },
  offset: '50%'
});
});

Answer 1

我尝试用不透明度来做这件事，但我遇到了Javascript问题。不过我想出了这个。

这不完全是你正在寻找的东西，但我认为它非常接近，没有那么麻烦，没有Javascript。

我会使用容器上的:before和:after元素在元素的顶部和底部制作渐变，这样就可以伪造不透明度。

这是一个快速演示：http://jsbin.com/aVaSIJuB/1/edit?html,css,output