我很确定你们中的一些人知道网站的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();
});
到目前为止它还没有媒体网站上的代码那么顺畅。
任何人都有任何想法,他们正在做什么来获得这种超级流畅的滚动变换效果?我无法找到它 - 它们的代码太复杂/太压缩,无法获取任何信息。
提前感谢任何答案!
此致 标记
答案 0 :(得分:2)
最大的改进是从这个:
$(window).on('scroll', function(){
windowTop = $(window).scrollTop();
parallax();
});
为:
$(window).on('scroll', function(){
window.requestAnimationFrame(parallax);
});
将windowTop存储在视差函数内部。使这个超出范围变量毫无意义。
此外,虽然你的示例代码中没有它“parallaxElem”应该是一个超出范围的变量,因为你不想在每个元素上搜索元素滚动。