基於窗口寬度滾動時的淡入淡出元素不透明度

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 （例如，屏幕的頂部/左側）。