投稿 搜索
当前位置: 站长天下 / 图片相册背景 / 基于jQuery和GSAP的图片背景视觉差特效插件
基于jQuery和GSAP的图片背景视觉差特效插件
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-02
    阅读:

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