javascript - 在 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 网站上的代码流畅。

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

非常感谢您提前回答!

问候标记

Answer 1

最大的改进是从这里开始:

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

到:

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

store windowTop里面的视差函数。将其设为超出范围的变量毫无意义。

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