mgGlitch.js-模拟显示故障的jQuery插件

mgGlitch.js是一款能够模拟显示器故障效果的jQuery插件。mgGlitch.js能够为页面中的任何元素制作错屏效果,就像显示器发生故障时的画面在闪动的效果。

使用方法

在页面中引入jquery和mgGlitch.js文件。

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

HTML结构

DEMO中是以背景图片为例子,它的HTML结构如下:

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

 初始化插件

在页面DOM元素加载完毕之后,通过mgGlitch()方法来初始化插件。

$( function() {
  $( ".glitch-img" ).mgGlitch({
      destroy : false, // set 'true' to stop the plugin
      glitch: true, // set 'false' to stop glitching
      scale: true, // set 'false' to stop scaling
      blend : true, // set 'false' to stop glitch blending
      blendModeType : 'hue', // select blend mode type
      glitch1TimeMin : 600, // set min time for glitch 1 elem
      glitch1TimeMax : 900, // set max time for glitch 1 elem
      glitch2TimeMin : 10, // set min time for glitch 2 elem
      glitch2TimeMax : 115, // set max time for glitch 2 elem
      zIndexStart : 8, // because of absolute position, set z-index base value
  });
});

 配置参数

mgGlitch.js插件的可用配置参数有:

  • destroy:是否禁用插件。

  • glitch:设置为false停止画面闪动效果。

  • scale:设置为false停止缩放。

  • blend:设置为false停止混合模式。

  • blendModeType:混合模式的类型。

  • glitch1TimeMin:设置第一个闪动元素的闪动最小时间。

  • glitch1TimeMax:设置第一个闪动元素的闪动最大时间。

  • glitch2TimeMin:设置第二个闪动元素的闪动最小时间。

  • glitch2TimeMax:设置第二个闪动元素的闪动最大时间。

  • zIndexStart:闪动元素必须是绝对定位,通过该参数来设置z-index属性。


  GitHub


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏