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

Question

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

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

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

我一直试图通过结合使用jQuery waypoints插件和淡化不透明度来实现这一目标。

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

$(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