<h1>mgGlitch.js : a small jQuery helper for glitch</h1>

<div class="container">
   <!-- this elem will be glitch -->
   <div class="glitch-img" style="background-image: url('https://images.unsplash.com/photo-1502768040783-423da5fd5fa0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')"></div>
</div>

<p>Find this project on <a href="https://github.com/hmongouachon/mgGlitch" title="Github">Github</a></p>

*, *:after, *:before {
  -moz-box-sizing:border-box; 
   box-sizing:border-box;
}

body, html {
  position: relative; 
  height: 100%; 
  width: 100%; 
  overflow: hidden;
}

body { 
  background-color: #fff; 
  margin: 0; 
}

h1 {
  position: absolute; 
  top:0; 
  left :0; 
  z-index: 10;
  width: 100%;
  text-align: center; 
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  margin-top: 30px; 
  font-size: 16px; 
  color: #f54955; 
}

p { 
  position: absolute; 
  bottom:0; 
  left :0; 
  z-index: 10; 
  width: 100%; 
  text-align: center; 
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #999999;  
  margin-bottom: 30px; 
  font-size: 14px;
}

p a {
  color: #f54955; 
  text-decoration: none; 
  outline: none;
}
        
.container {
  position: relative; 
  margin: 80px; 
  background-color: #fff; 
  width: calc(100% - 160px); 
  height: calc(100% - 160px); 
  overflow: hidden; 
}

/* glitch elem must have absolute position */
 .glitch-img {
   position: absolute; 
   width : 100%; 
   height : 100%; 
   top: 0 ; 
   left : 0; 
   background-position:center;  
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;
   background-size:cover;
   opacity : 1
 } 

// https://github.com/hmongouachon/mgGlitch

$( function() {
		$( ".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 : 10, 
          // set max time for glitch 1 elem
          glitch1TimeMax : 100,
          // set min time for glitch 2 elem
          glitch2TimeMin : 10, 
          // set max time for glitch 2 elem
          glitch2TimeMax : 300, 
		});
});