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

Answer 2

这样可以解决问题：

def fun
  @post=Post.new
  @post.category_id=1
  @post.save
end

我不确定它是否会以较慢的速度移动。但这允许您的背景滚动浏览器的滚动。

Answer 3

我使用StellarJS，它是一个相对轻量级且功能丰富的JQuery插件，用于为背景甚至div和其他元素添加视差效果。就像在HTML标记中添加data属性然后在窗口上运行Stellar对象一样简单。它确实需要将JQuery包含在您的网站中，但很可能您已经使用了JQuery。有关更多信息和演示，请查看here

Answer 4

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

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

Answer 5

假设您的背景（#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

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

5 个答案: