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

我已经建立了一个页面-它有一个小部分，我包括链接到我的社交网站。

该部分目前有一个漂亮的CSS背景-但我想让背景"滚动"，当用户向上或向下滚动网站页面。

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

我在网上尝试了一些教程，但没有成功。

我创建了一个代码依赖于我所拥有的基础

但这是我的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可以不用担心。

这可以通过javascript:

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

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

可以这样做:

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

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

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

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

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

假设您的背景(#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;
}

<<p> jsfiddle演示/strong>

相关内容

最新更新

热门标签：