如何使用它:

1.加载jQuery JavaScript库和管理Glitch.js文档末尾的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="src/mgGlitch.min.js"></script>

2.创建一个将出现故障的元素。

<div class="glitch-img" style="background-image: url('1.jpg"></div>

3.注意，毛刺元件必须具有绝对位置。

.glitch-img {
  position: absolute;
  ...
}

4.调用该函数，将默认的故障效果应用于您刚刚创建的元素。

$( ".glitch-img" ).mgGlitch();

5.可用选项和默认值。

$( ".glitch-img" ).mgGlitch({
 
  // set 'true' to stop the plugin
  destroy : false, 
 
  // set 'false' to stop glitching
  glitch: true, 
 
  // set 'false' to stop scaling
  scale: true, 
 
  // set 'false' to stop glitch blending
  blend : true, 
 
  // CSS blend-mode property
  // normal
  // multiply
  // screen 
  // overlay
  // darken
  // lighten
  // color-dodge
  // color-burn
  // difference 
  // exclusion
  // hue
  // saturation  
  // color
  // luminosity
  blendModeType : 'hue', 
 
  // set min time for glitch 1 elem
  glitch1TimeMin : 600, 
 
  // set max time for glitch 1 elem
  glitch1TimeMax : 900, 
 
  // set min time for glitch 2 elem
  glitch2TimeMin : 10, 
 
  // set max time for glitch 2 elem
  glitch2TimeMax : 115, 
 
  // z-index
  zIndexStart : 5
  
});

更新日志：

2018-01-11

• 更新mgGlitch.js

2016-07-24

• JS更新

预览截图

jQuery插件 动画故障效果 mglitch