jQuery和CSS3可互动的背景视觉差效果_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常酷的jQuery和CSS3可互动的背景视觉差效果。该视觉差特效在鼠标移动的时候，背景图片和前景的文字会以不同的速度移动，产生视觉差效果。

使用方法

HTML结构

该视觉差特效的HTML结构非常简单，使用一个<div>元素作为包裹元素，在它里面使用一个空的<div>元素作为页面的背景层。

<div class="wrap">
  <div class="bg"></div>
  <h1>......</h1>
</div>

CSS样式

包裹元素div.wrap使用相对定位，高度设置为100%，超出屏幕的部分全部隐藏。

.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

背景层需要采用绝对定位，宽度和高度都为100%，背景图片使用background-size: cover;来设置，使图片占据整个屏幕。

.wrap .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../img/mountains.jpg") no-repeat center center;
  background-size: cover;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

JavaScript

要激活背景视觉差效果，只需要使用下面的简单的JavaScript代码即可。

var lFollowX = 0,
      lFollowY = 0,
      x = 0,
      y = 0,
      friction = 1 / 30;

function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;

translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

$('.bg').css({
  '-webit-transform': translate,
  '-moz-transform': translate,
  'transform': translate
});

window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;

});

moveBackground();