可以和鼠标互动的多背景层jQuery视觉差插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

nGyroParallax是一款可以和鼠标互动的多背景层jQuery视觉差插件。该视觉差插件在页面中设置多个背景图层，然后通过检测鼠标位置来不同图层的位置和移动速度，形成视觉差效果。

使用方法

使用该视觉差特效插件需要在页面中引入jQuery、jquery.nGyroParallax.min.js和jquery.easing.min.js文件。

         
<script src="js/jquery.min.js"></script>                  
<script src="js/jquery.easing.min.js"></script>                  
<script src="js/jquery.nGyroParallax.min.js"></script>

HTML结构

可以设置多个图层来制作视觉差效果，每一个图层使用一个<div>元素来包裹一张图片。

<div id="ink1-1" class="nGyroParallax1">
  <img src="img/fes_ink1-1.png" alt="" width="445" height="373">
</div>
<div id="ink1-2" class="nGyroParallax1">
  <img src="img/fes_ink1-2.png" alt="" width="379" height="412">
</div>

<div id="chouchin-1-1" class="nGyroParallax1">
  <img src="img/fes_chouchin.png" alt="" width="151" height="267">
</div>
<div id="chouchin-1-2" class="nGyroParallax1">
  <img src="img/fes_chouchin.png" alt="" width="151" height="267">
</div>

<div id="aori" class="nGyroParallax1">
  <img src="img/sc_aori.png" alt="" width="260" height="482">
</div>
<div id="hotaru" class="nGyroParallax1">
  <img src="img/sc_hotaru.png" alt="" width="202" height="474">
</div>

CSS样式

所有的图层都设置为居中定位，并设置一个CSS过渡动画效果。

.nGyroParallax1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .5s ease-out;
}

然后通过margin属性来使各个图层移动到指定的位置。

#chouchin-1-1 {
  margin: -160px 0 0 -460px;
}
#chouchin-1-2 {
  margin: -110px 0 0 280px;
}
#ink1-1 {
  margin: -186px 0 0 -400px;
}
#ink1-2 {
  margin: -206px 0 0 -40px;
}
#aori {
  margin: -241px 0 0 -270px;
}
#hotaru {
  margin: -237px 0 0 40px;
}

为需要进行鼠标互动的图像使用transform: translate3d(0,0,0);开启GPU模式，提高性能。并设置过渡动画的时间。

#chouchin-1-1 img,
#chouchin-1-2 img {
  transform: translate3d(0,0,0);
  transition: .5s;
} 
#aori img,
#hotaru img {
  transform: translate3d(0,0,0);
  -webkit-filter: drop-shadow(4px 0 3px black);
  -ms-filter: drop-shadow(4px 0 3px black);
  filter: drop-shadow(4px 0 3px black);
  transition: .5s;
}

初始化插件

在页面DOM元素加载完毕之后，可以通过nGyroParallax()方法来分别为各个图层进行初始化。

$(function(){
    
  $(window).load(function(){
    $('#chouchin-1-1').nGyroParallax({
      magnification: .05
    });
    $('#chouchin-1-2').nGyroParallax({
      magnification: .004
    });
    $('#aori').nGyroParallax();
    $('#hotaru').nGyroParallax();
  });
  
});