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

【问题标题】：How to create parallax effect like this?如何创建这样的视差效果？
【发布时间】：2014-04-20 05:24:18
【问题描述】：

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

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

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

有人有什么想法吗？

【问题讨论】：

我从未使用过 stellar，但我知道它是可能的。至于固定背景，请确保您设置了background-attachment: fixed。
@PatrickAllen 我试过了，但它似乎没有修复背景。不过，您似乎对视差很熟悉。您还有其他好的库推荐吗？
Stellar 是顶级之一，绝对应该可以使用。没听说过这个，但是这个演示看起来很简单，就像你需要的一样：plugins.jquery.com/parallax-imageScroll
看看，如果您需要帮助发布您所拥有的，我相信我们可以帮助您
@PatrickAllen 谢谢！我现在正在处理它，如果一切正常，我会通知你。

标签： html css parallax stellar.js

【解决方案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/

【讨论】：

+1 这是一个很好的解决方案。非常适合 OP 尝试做的事情......不需要插件。
是的，这说明了很多！谢谢。

【解决方案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 会显示一个简单的填充。

【讨论】：

【解决方案3】：

除了background-attachment: fixed

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

一个简单的DEMO HERE

For data-* attributes

一个很好的例子here来自tutorial

【讨论】：

【解决方案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) + '%)'
  });
});

Codepen：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

【讨论】：