KAIGAサイトでもグリッチjqueryを使用しているのを含めいくつかメモです。
jqueryはもちろんcssのみでグリッチできるものまであります。
各exampleページのソースもわかりやすくするため必要最低限のcodeしか書いていません。
また、各ブラウザで確認はとれていないので使用するかたはご自身で確認してください。
jQuery Glitch Plugin
画像をグリッチさせたい時に使うと便利です。
example
公開サイト
jquery.glitch.js
下記、codeを設置するだけの簡単なjqueryです。
<img src="sample.jpg" class="glitch0"><br>
<input type="button" onclick="start_glitch()" value="glitch">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.glitch.js"></script>
<script type="text/javascript">
window.onload = function(){
$('.glitch0').glitch(31680);
}
function start_glitch(){
$('.glitch0').glitch(14004);
}
</script>
glitch.js
画像のみやdivごとグリッチを掛ける事ができます。glitch.jsは工夫しだいで色々な事が出来るのでオススメです。
example
公開サイト
html2canvas.js
下記、codeはhead内に入れてください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://raw.github.com/sjhewitt/glitch.js/master/glitch.js"></script>
<script src="html2canvas.js"></script>
<script type="text/javascript">
$("#currentContent").glitch(function(canvas){
// do something with canvas
});
</script>
下記、codeはbody内に入れ下さい。※3パターンあります。
Glitch an image
<div id="example1" class="example">
<h1>Glitch an image</h1>
<img class="source" src="sample.jpg" style="width: 100%;" />
<div class="middle"><button class="btn">Glitch</button></div>
<div class="target"></div>
</div>
<script>
$("#example1 button").click(function(){
$("#example1 .source").glitch(function(canvas){
$("#example1 .target").html(canvas);
});
})
</script>
Glitch some HTML elements
<div id="example2" class="example">
<h1>Glitch some HTML elements</h1>
<div class="source">
<h2 style="background: #238aa1;">Header Element</h2>
<div>
<input type="text" value="input text" />
</div>
<ul>
<li>List Element 1</li>
<li>List Element 2</li>
<li>List Element 3</li>
<li>List Element 4</li>
</ul>
<button class="btn">Button with rounded corners</button>
</div>
<div class="middle"><button class="btn">Glitch</button></div>
<div class="target"></div>
</div>
<script>
var example2 = false;
$("#example2 button").click(function(){
if(!example2) {
example2 = $("#example2 .source");
} else {
$("#example2 canvas").replaceWith(example2);
}
example2.glitch();
})
</script>
Glitch Transition
<div id="example3" class="example">
<h1>Glitch Transition</h1>
<div class="source">
<h2>Page 1</h2>
<p>text1text1text1text1text1text1text1text1text1text1text1</p>
</div>
<div class="middle"><button class="btn">Glitch</button></div>
<div class="target"></div>
</div>
<script>
$(function(){
var example3a = $("#example3 .source");
var example3b = $("<div class='source'><h2>Page 2</h2><p>text2text2text2text2text2</p></div>");
$("#example3 button").click(function(){
if(example3a[0].parentNode) {
example3a.glitch(example3b, {
effect: "slide"
});
} else {
example3b.glitch(example3a);
}
});
});
</script>
HYPERGLITCH
HYPERGLITCHはKAIGAでも使用してるグリッチエフェクトです。
こちらは、idやclassでの指定なので画像もテキストもdiv全体にグリッチする事が可能です。
example
公開サイト
下記、codeはhead内に入れてください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hyperglitch.com/theme/js/glitch.jquery.js"></script>
<script type="text/javascript">
$(function(){
$('span.block').glitch();
});
</script>
下記、codeはbody内に入れてください。
<span class="block">GlitchGlitchGlitchGlitchGlitch</span>
CSS Glitched Text
こちらはサイト自体がcssエディターとなっている為、公開されているサイトを見ていただければ早いと思います。
公開サイト