jQuery炫酷网页3D背景视觉差特效

这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件。该视觉差特效可以制作为全屏背景视觉差效果，也可以在一个容器中制作背景视觉差效果。当用户移动鼠标时，由于背景图片的移动速度不同，形成了3D视觉差效果。

使用方法

使用这个3D背景视觉差特效插件要引入jQuery和jquery.simple3D.js文件。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simple3D.js"></script>                
              

HTML结构

使用一个<div>作为容器，里面可以嵌套多个<div>。每个<div>都用于放置你需要作为背景视觉差效果的图片。

<div id="simple3D">
  <div class="dot"></div>
  <div class="kinoco"></div>
  <div class="star"></div>
</div>                
              

CSS样式

#simple3D {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 900px;
}
#simple3D div {
  min-height: 1100px;
  width: 120%;
}
#simple3D div.dot {
  background: url(../images/dot2.png);
}
#simple3D div.kinoco {
  background: url(../images/kinoco.png);
}
#simple3D div.star {
  background: url(../images/star.png);
}                 
              

初始化插件

<script>
  $("#simple3D").simple3D({
  moveX:3, // 1 - 5
  moveY:3, // 1 - 5
  bgImage:true, // use background image mode
  targetAll:true,
  reverseX: true,
  reverseY: true
  });
</script>