鼠标互动多背景层视觉差jQuery特效插件

PetitQ 图片/图形 2018-11-18 1.79K 0 0

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

鼠标互动多背景层视觉差 jQuery 特效插件

已有 446 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

鼠标互动多背景层视觉差jQuery特效插件

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

鼠标互动多背景层视觉差 jQuery 特效插件

相关文章

jQuery+css3炫酷3D互动图片画廊特效

CSS3响应式图片网格布局

自动视频播放手机360度旋转效果

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

鼠标互动多背景层视觉差 jQuery 特效插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复