可以和鼠标互动的多背景层jQuery视觉差插件 |其他|下载

简要教程

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

使用方法

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

HTML结构

可以设置多个图层来制作视觉差效果，每一个图层使用一个

元素来包裹一张图片。

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();
  });
  
});