滚动转换 - 与medium.com

时间:2015-10-21 21:41:08

标签: javascript jquery html css transform

我很确定你们中的一些人知道网站的media.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();

        });

到目前为止它还没有媒体网站上的代码那么顺畅。

任何人都有任何想法,他们正在做什么来获得这种超级流畅的滚动变换效果?我无法找到它 - 它们的代码太复杂/太压缩,无法获取任何信息。

提前感谢任何答案!

此致 标记

1 个答案:

答案 0 :(得分:2)

最大的改进是从这个:

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

为:

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

将windowTop存储在视差函数内部。使这个超出范围变量毫无意义。

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