基于窗口宽度滚动时淡入元素不透明度

Question

我试图在元素第一次进入视口时将其淡入，然后在到达视口末端时使其具有100%的不透明度。我已经工作到100%不透明，当它到达最后。然而，当它开始设置动画时，它开始的大约是60%，我知道这是因为我基于滚动位置。所以我的问题是，一旦它进入视口，我如何计算从0开始的不透明度？

这就是我目前所拥有的：

$('.left-cont').each(function() {
    var $this     = $(this),
        leftPos   = $this.offset().left,
        fadeStart = leftPos - winWidth,
        fadeUntil = leftPos,
        opacity;
        console.log( winWidth - (leftPos - scrollPos));
        console.log(fadeStart);
    if( scrollPos <= fadeStart ) {
        opacity = 0;
    }
    else {
        opacity = scrollPos/fadeUntil;
    }
    $this.css({
        'opacity': opacity
    });
});

如果需要，我可以提供更多的上下文。感谢您的帮助。

Answer 1

1）这个jQuery函数只执行一次还是放在onScroll绑定函数中？

$( window ).scroll(function() {
  /* get scroll top and left values here */
  $( ".box" ).each(function(){
    /* do position check and css adjustments here */
  });
});

2） 不透明度的计算为：(1 - ((box_offsetTop - scrollTop) / windowHeight))

3） 我在这里做了一个垂直滚动的工作示例：http://jsfiddle.net/0mks8eut/1/

您可以通过（取消）注释函数内的其他计算，将其更改为基于水平滚动计算不透明度

确保对象后面/旁边有足够的内容（或填充/边距）。否则，它将永远不会到达opacity:1（例如屏幕的顶部/左侧）。