当前位置：首页 > 网页特效 > 背景

可以和鼠标互动的多背景层jQuery视觉差插件

分类：背景日期：2024-05-14 点击(3) 评论(0)

简介

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

```html
<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>元素来包裹一张图片。

```html
<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过渡动画效果。

```html
.nGyroParallax1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .5s ease-out;
}
```
然后通过margin属性来使各个图层移动到指定的位置。

#chouchin-1-1 {
```html
  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模式，提高性能。并设置过渡动画的时间。

```html
#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()方法来分别为各个图层进行初始化。

```html
$(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。

web299.com

可以和鼠标互动的多背景层jQuery视觉差插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果