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

Question

我一直在尝试建立一个像这个网站上那样具有视差效果的网站: http://www.sparksandhoney.com/the-open-agency-index/或者 http://www.sparksandhoney.com/press-index/

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

顺便说一句，我浏览了这个网站的源代码，他们使用了 Squarespace，但我正在尝试在没有它的情况下实现效果。

有没有人有什么想法？

Answer 1

其实很简单。导航和内容容器在流中。内容有一个 margin-top 将其与导航分开。然后将背景图像设置为 position: fixed，并在滚动时偏移滚动位置的百分比(例如，30%)。

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

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

这是整个 Action 的 jsFiddle:http://jsfiddle.net/9gK9z/1/