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

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-binded函数内部？

$( 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 （例如，屏幕的顶部/左侧）。