glitch.js
Version:
Glitch effect your html
32 lines (28 loc) • 952 B
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
body { background: #000; }
p { font-family: sans-serif; color: #666; clear:both;}
span { color: #fff; }
div {width:30px;height:30px;float:left;}
div.one{ margin-right:30px; border: 1px solid #fff; }
div.two{ background:#666; }
div.three{ background:#fff; position:absolute; top: 300px; left:300px; background:#fff; }
</style>
<title>#1</title>
<script type="application/javascript" src="../Glitch.js"></script>
<script type="application/javascript">
window.addEventListener('load', function() {
new Glitch(document.body, {delay:1000, sfx:['wavs/09.wav','wavs/10.wav','wavs/16.wav','wavs/17.wav']});
}, false);
</script>
</head>
<body>
<p><span>Glitch</span> is instantiated on the document body.</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>