简单的网页背景滚动视觉差特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简单的网页背景滚动视觉差特效。该背景视觉差特效使用几句简单javascript语句即可完成，在页面滚动时，背景图片和网页元素可以形成滚动视觉差效果。

使用方法

HTML结构

在<body>中放置你需要的HTML元素。

<body>
  <div>
    <!--可以是任何内容-->
  </div>
</body>

CSS样式

将<body>元素的高度设置为2倍，背景图片的background-size属性设置为cover，background-attachment属性设置为固定fixed。

body {
  font-family: 'Ubuntu Mono', sans-serif;
  height: 200%;
  width: 100%;
  background-image: url('img/bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}

页面中的块级元素使用绝对定位。

div {
  position: absolute;
  top: 40%;
  left: 20%;
  color: white;
  font-size: 1.2em;
  text-shadow: #000 1px 1px 1px;
  width: 1000px;
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
}

javaScript

制作页面背景视觉差效果的javascript代码非常简单：通过监听window对象的onscroll事件，在页面滚动时修改body元素的backgroundPosition样式。

function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "
                                                                         +(-window.pageYOffset/speed)+"px";
  }
}