简单的视差效果,没有给出正确的效果

时间:2018-01-20 21:33:38

标签: javascript jquery html css

我试图这样做,以便当我向下滚动时,它会将标题文本向下推一点,即在顶部添加边距,因此它仍保留在视图中。

这是我试图获得的确切效果,标题文字: 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以获得类似于第一个链接的效果?

1 个答案:

答案 0 :(得分:2)

因为你要求使用JavaScript,

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

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

您可以查看演示here

或者你可以从materializecss获得帮助。(它很容易使用)