图片/图形
鼠标互动多背景层视觉差jQuery特效插件
PetitQ
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();
});
});
配置参数
该视觉差插件可用的配置参数有：
background：指定某个图层是否是背景层，默认值为 false
magnification：图像的移动范围，数值越大移动得越远。默认值为 0.02
duration：动画的持续时间，默认为 500 毫秒
easing：由 jquery.easing.js 插件指定的 easing 效果。默认值为 easeOutExpo
Github 地址：https://github.com/Nunifuchisaka/nGyroParallax
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
