基于TweenMax的鼠标互动背景视觉差特效

jquery-mouse-parallax是一款基于TweenMax的鼠标互动背景视觉差特效jQuery插件。该视觉差特效使用多个图片层来制作，用户可以通过鼠标移动来使各个图片层以不同的速度进行移动，从而产生视觉差效果。

使用方法

该视觉差特效依赖于TweenMax，使用时要引入jQuery，TweenMax.min.js和jquery-parallax.js文件

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="js/jquery-parallax.js" type="text/javascript"></script>               
              

HTML结构

你可以在页面中添加多张用于制作视觉差效果的图片。

<img src="bg.jpg" alt="Background" class="background">
<img src="cloud.png" alt="Clouds" class="cloud">          
              

CSS样式

你需要确保作为图片层的图片都使用绝对定位方式：position: absolute，并给它们设置一个初始位置。

.background {
  position: absolute; 
  z-index: 1;
  ...
}

.cloud {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  ...
}                
              

初始化插件

在页面初始化完毕之后，可以通过下面的方法来初始化该视觉差特效插件。

$( document ).mousemove( function( e ) {
    $( 'ELEMENT'   ).parallax( resistance, e );
    $( 'ELEMENT-2' ).parallax( resistance, e );
});                
              

resistance是一个整数或浮点数，代表移动的距离。e是鼠标移动事件。