javascript - 当用户滚动网页时滚动 CSS 背景 - 视差？

Question

我建立了一个页面 - 它有一个小部分，其中包含指向我的社交网站的链接。

该部分目前有一个漂亮的 CSS 背景 - 但我想要的是当用户向上或向下滚动站点页面时该背景“滚动”。

这是一个视差效果 - 但我不确定这是否可以用 CSS 背景来完成。

我在这里或那里在线尝试了一些教程但没有成功。

我创建了一个 codepen on the basics of what I have

但这是我的 HTML:

<div id="social-row">
  <div id="para-social-bg">
    <div class="social-icons" id="para-social-shadow">
      <h4>SOCIAL STUFF</h4>
        <ul>
          <li><a href="mytwitter" title="http://www.mytwitter.com" class="icon-social twitter">Twitter</a></li>
          <li><a href="http://www.myfacebook.com" title="me on Facebook" class="icon-social facebook">Facebook</a></li>
          <li><a href="http://www.myblog.com" title="my news" class="icon-social atom">Blog feed</a></li>
          <li><a href="http://www.myinstagram.com" title="me on Instagram" class="icon-social instagram">Instagram</a></li>
      </ul>
    </div>
  </div>
</div>

...和我的 CSS:

#para-social-bg {
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;  
}

#para-social-shadow {
box-shadow:         inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-moz-box-shadow:    inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-webkit-box-shadow: inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
  }

最终，我只需要菱形样式在用户向下滚动页面时垂直“滚动”(但速度比用户滚动页面的速度慢 - 所以它似乎在上方和下方其他部分的“后面”它)。

有什么想法吗？对所有想法开放 - CSS、JS、JQUERY - 任何东西。

CSS最好，JS可以放心

Answer 1

这可以用 javascript 来完成:

$(window).scroll(function(){
  $("#para-social-bg").css({"background-position":"left " +($(window).scrollTop()*.5) + "px"})
});

http://codepen.io/anon/pen/qdRjXJ