text 毛刺故障毛刺

Posted 2021-04-29

glitch glitch glitch
--------------------


A [Pen](https://codepen.io/hmongouachon/pen/LZGwWY) by [Hadrien Mongouachon](https://codepen.io/hmongouachon) on [CodePen](https://codepen.io).

[License](https://codepen.io/hmongouachon/pen/LZGwWY/license).

<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('http://hmongouachon.com/assets/img/demos/mosh1.jpg')"></div>
</div>

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

// 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 : 200, 
          // set max time for glitch 1 elem
          glitch1TimeMax : 400,
          // set min time for glitch 2 elem
          glitch2TimeMin : 10, 
          // set max time for glitch 2 elem
          glitch2TimeMax : 100, 
		});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hmongouachon/mgGlitch/src/mgGlitch.min.js"></script>

*, *: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
 } 

<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" />