如何创建这样的视差效果

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);
});

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

Answer 2

简单/快速/解决方案

视差效果是在用户眼睛上留下的一个突出效果。

我发现了一种非常简单的方法来使用多个div来实现视差效果：

<div style="background-size:cover;background-image:url('https://picsum.photos/400/300?random=1'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('https://picsum.photos/400/300?random=2'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('https://picsum.photos/400/300?random=3'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>

它的工作原理

background-attachment实际上在代码中实现了真正的魔术。尽管BODY会显示一个简单的填充。

Answer 3

除了background-attachment: fixed

还有一种技术围绕着控制背景图像的速度以及所需的属性："data-type"和"data-speed"

一个简单的演示

对于数据-*属性

教程中的一个很好的例子

Answer 4

您可以这样做：

.wraper
  width: 100%
  height: auto
.box
  overflow: hidden
  position: relative
  width: 100%
  padding-bottom: 40%
.object1
  position: absolute
  right: 15%
  top: 8%
  width: 13%
  height: 60%
  background:
    size: contain
    repeat: no-repeat
    image: url(https://openclipart.org/image/2400px/svg_to_png/213897/black-android-phone.png)

如果愿意，可以添加更多对象。

然后在JS中：

$(window).scroll(function(){
  var curentPosition = Math.round($(this).scrollTop());
  console.log(curentPosition);
  $('.object1').css({
    'transform': 'translate(0px, -' + (curentPosition / 5) + '%)'
  });
});

代码笔：http://codepen.io/GlupiJas/pen/yOxRxG

仅CSS：http://codepen.io/GlupiJas/pen/BKqxyE

背景视差：http://codepen.io/GlupiJas/pen/YqJdJg?editors=1010

JS/JQUERY类：http://codepen.io/GlupiJas/debug/YqJdJg