HTML – 如何创建像这样的视差效果？

我一直试图建立一个像这个网站上的视差效果的网站：
http://www.sparksandhoney.com/the-open-agency-index/
要么
http://www.sparksandhoney.com/press-index/

我一直在尝试使用stellar.js,但我似乎无法使导航栏和网页同步滚动图像这个网站.到目前为止,我一直在努力使导航栏和文本层成为一个在固定背景上滚动的div,但这根本不起作用？

顺便说一句,我已经浏览了这个网站的源代码,他们使用的是Squarespace,但是我试图在没有它的情况下做到这一点.

有没有人有任何想法？

解决方法

它实际上非常简单.导航和内容容器在流程中.内容具有margin-top以将其与nav分开.然后将背景图像设置为位置：固定,并且在滚动上偏移滚动位置的百分比(例如,30％).

您不需要任何库,但jQuery使它更容易.考虑到stellar.js需要jQuery,我假设你使用它没有问题.在这种情况下,以下代码足以让它为您工作：

$(window).on('scroll',function() {
    $('#background').css('margin-top',$(window).scrollTop() * -.3);
});

这是整个行动的jsfiddle：http://jsfiddle.net/9gK9z/1/

原文地址：https://www.jb51.cc/html/232171.html