jQuery Plugin For Animated Glitch Effect - mgGlitch

mgGlitch is a lightweight (~3kb minified) jQuery plugin which makes use of CSS3 transforms to create animated glitch effects on any elements.

See also:

• jQuery Plugin For Custom Glitch Text Effect - Glitch.js

See It In Action:

How to use it:

1. Load both jQuery JavaScript library and the mgGlitch.js script at the end of the document.

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

2. Create an element that will be glitched.

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

3. Note that the glitch element must have absolute position.

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

4. Call the function to apply a default glitch effect to the element you just created.

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

5. Available options and defaults.

$( ".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
  
});

Changelog:

2018-01-11

• Update mgGlitch.js

2016-07-24

• JS update

---

This awesome jQuery plugin is developed by hmongouachon. For more Advanced Usages, please check the demo page or visit the official website.