javascript - 简单的视差效果，没有给出正确的效果

Question

我试图做到这一点，以便当我向下滚动时，它会将标题文本向下推一点，即在顶部添加边距，以便它保留在 View 中。

这正是我试图通过标题文本获得的效果: http://www.leeannpica.com/

我在这上面花了好几个小时，但我只能做到这一点: http://hiven.com/parallax.html

它使用这段代码:

$(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $(".logo").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});

我似乎无法获得与您看到的相同效果的任何地方。任何人都可以帮助我了解如何调整 javascript 以获得类似于第一个链接的效果吗？

Answer 1

既然你要求使用 JavaScript，

$(window).scroll(function(){
var fromTop = $(window).scrollTop();
$(".logo").css({"margin":fromTop/3+"px 0px 0px 0px"});
});

在视差效果中，你希望物体以不同的速率相对于彼此移动。因此标题移动的速率被降低了 3 倍，即“fromTop/3”。你可以玩这个来获得想要的结果。

您可以查看演示 here

或者您可以从 materializecss 寻求帮助.(很容易使用)