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

基于滚动的窗口宽度淡化元素不透明度

1 个答案: