在 Scroll 上变换 - 和在 medium.com 上一样流畅

Question

我很确定你们中的一些人知道网站 medium.com 文章页面。

例如，这里：Click

当您向下滚动时，此页面上有一个非常“简单”的效果——不透明度和变换变化。乍一看没什么大不了的。我已经在网站上实现了相同的效果可能超过 10 次。

但如果你仔细观察它，你会发现这是多么完美的平滑。似乎文本完美地滑过表面。 （我在最新的 Chrome 上查看）

如果这只是想象，我很感兴趣，并迅速建立了相同的东西来检查这一点。所以我想出了这个代码：

        var windowTop;
        var limit = 420;    

        function parallax(){

            parallaxElem.css({

                "opacity": (1 - (windowTop / limit)),
                "-webkit-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
                "-ms-transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)",
                "transform":"translate3d(0," + (100 * (windowTop / limit)) + "px,0)"

            });

        }

        $(window).on('scroll', function(){

            windowTop = $(window).scrollTop();

            parallax();

        });

而且它远没有 Medium 网站上的代码流畅。

任何人都知道，他们在做什么来获得这种超级平滑的滚动变换效果？我就是找不到——他们的代码对我来说太复杂/太压缩了，无法从中获取任何信息。

非常感谢您提前回答！

问候 标记

Answer 1

最大的改进就是从这个出发：

$(window).on('scroll', function(){
  windowTop = $(window).scrollTop();
  parallax();
});

到：

$(window).on('scroll', function(){
  window.requestAnimationFrame(parallax);
});

将 windowTop 存储在视差函数中。将其设为超出范围的变量是没有意义的。

此外，尽管您的示例代码中没有“parallaxElem”应该是一个超出范围的变量，因为您不想对每个元素都进行 DOM 搜索滚动。