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

除了background-attachment: fixed

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

一个简单的DEMO HERE

For data-* attributes

来自here

的一个很好的例子tutorial

Answer 3

你可以这样做：

.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) + '%)'
  });
});

Codepen：http://codepen.io/GlupiJas/pen/yOxRxG

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

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

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

Answer 4

视差效果是留给用户眼睛的出色效果。我发现了一种非常简单的视差效果方法

您可以使用多个div来执行此操作

<div style=" size:cover; background-size:cover;background-image:url('2.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('3.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>
<div style=" background-size:cover;background-image:url('4.jpg'); background-repeat:no-repeat; width:100%; height:600px; background-attachment:fixed;">
</div>

在我的代码（给出的代码段）中，您只需更改图片网址并输入您自己的图片网址。

“背景附件”实际上代码中真正的魔力。虽然BODY可以看到简单的填充。

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

4 个答案: