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

Question

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

该部分目前有一个很好的背景 CSS - 但我想要的是在用户向上或向下滚动网站页面时将背景设置为 'scroll'。

这是视差效果 - 但我不确定这是否可以在 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);
  }

最终，当用户向下滚动页面时，我只需要将菱形样式设置为 'scroll' 垂直（但速度比用户滚动页面的速度慢 - 所以它看起来是 'behind'它上方和下方的其他部分）。

有什么想法吗？对所有想法开放 - CSS、JS、JQUERY - 随便什么。

CSS最好了，JS可以安心搞定

Answer 1

这样做就可以了：

body { 
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

我不确定它是否会以较慢的速度移动。但是这样可以让你的背景滚动浏览器的滚动条。

Answer 2

我用StellarJS, it is a relatively lightweight and feature-rich JQuery plugin for adding parallax effects to backgrounds and even divs and other elements. It is as easy as adding a data attribute to your HTML tag and then running the Stellar object on the window. It does require JQuery to be included with your website, but it is likely you are using JQuery already. For more information and demos, check it out here

Answer 3

连同其他人所说的，这里有一个使用 javascript html 和 css 滚动时获得视差效果的教程

http://www.kirupa.com/html5/smooth_parallax_scrolling.htm

Answer 4

假设您的背景 (#bg) 是一个 fixed 元素，加载时 top: 0; 并且 z-index 低于其余元素。你得到 scrolTop 然后给背景一个负数 top，但数字较小：

jQuery:

$(window).scroll(function() {
    var scrl = $(window).scrollTop();
    $('#bg').css('top', -scrl/20);
});

我只放了20，如果太快可以调大，反之亦然

CSS:

#bg {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("BACKGROUND_URL");
    background-repeat: repeat;
    height: 2000px;
    z-index: -100;
}

jsfiddle DEMO

Answer 5

这可以用javascript来完成：

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

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

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

Scroll a CSS background when user scrolls the webpage - parallax?

javascript

jquery

html

css

parallax