jQuery Plugin For Animated Glitch Effect - mgGlitch

jQuery Plugin For Animated Glitch Effect - mgGlitch
File Size: 88.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

How to use it:

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

<script src="//code.jquery.com/jquery-3.0.0.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, 

  // select blend mode type
  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
  
});

Change log:

2016-07-24


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