我试图这样做,以便当我向下滚动时,它会将标题文本向下推一点,即在顶部添加边距,因此它仍保留在视图中。
这是我试图获得的确切效果,标题文字: 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以获得类似于第一个链接的效果?
答案 0 :(得分:2)
因为你要求使用JavaScript,
$(window).scroll(function(){
var fromTop = $(window).scrollTop();
$(".logo").css({"margin":fromTop/3+"px 0px 0px 0px"});
});
在视差效果中,你希望物体相对于彼此以不同的速率移动。因此标题移动的速率减少了3倍,即“fromTop / 3”。你可以玩这个来获得期望的结果。
您可以查看演示here
或者你可以从materializecss获得帮助。(它很容易使用)