基于jQuery和GSAP的图片背景视觉差特效插件

这是一款基于jQuery和GSAP的图片背景视觉差特效插件。该插件能够在图片进入视口，或鼠标HOVER图片时，使图片产生视觉差移动或视觉差晃动效果。

安装

可以通过npm来安装该插件。

npm install parallax_background
                

使用方法

在页面中引入TweenLite.min.js、CSSPlugin.min.js、jquery和parallax_background.js文件。

<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="jquery.min.js"></script>
<script src="parallax_background.js"></script>
                

HTML结构

使用该图片背景视觉差插件的基本HTML结构如下：

<div class="parallax-background">
  <div class="parallax-inner" style="background-image: url('background-image.jpg')">
  </div>
</div>                    
                

初始化插件

在页面DOM元素加载完毕之后，通过parallaxBackground()方法来初始化该图片背景视觉差插件。

$(document).ready(function() {
    $('.parallax-background').parallaxBackground();
});
                

使用data-*属性

在使用插件时，你可以使用data-parallax-background属性来设置参数。但是你同样需要使用$(element).parallaxBackground()方法来调用插件。例如：

<div class="parallax-background" data-parallax-background='{"duration": 3, "zoom": 30}'>
  <div class="parallax-inner" style="background-image: url('background-image.jpg')">
  </div>
</div>
                

配置参数

该图片背景视觉差插件的可用配置参数有：

该基于jQuery和GSAP的图片背景视觉差特效插件的github地址为：https://github.com/lemehovskiy/parallax_background