html - 如何创建像这样的视差效果？

我一直试图建立一个网站，像这个网站上的一个视差效果：
http://www.sparksandhoney.com/the-open-agency-index/
或
http://www.sparksandhoney.com/press-index/
我一直在尝试使用stellar.js，但我似乎无法使导航栏和网页在像这个网站这样的图像上同步滚动。到目前为止，我只是试图使导航栏和文本层成为一个div，滚动到一个固定的背景上，但这根本不起作用？
顺便说一下，我浏览过这些网站的源代码，它们使用的是平方空间，但我试图在没有它的情况下实现效果。
有人有什么想法吗？

最佳答案

其实非常简单。导航和内容容器正在流动中。内容有一个margin-top来将其与导航分开。然后将背景图像设置为position: fixed，滚动时偏移滚动位置的百分比（例如30%）。
您不需要任何库，但jquery使之更容易。考虑到stellar.js需要jquery，我认为使用它没有问题。在这种情况下，以下代码足以让它为您工作：

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

下面是整个活动的一个jsfiddle：http://jsfiddle.net/9gK9z/1/

关于html - 如何创建像这样的视差效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23178762/