Web制作(フリーランスWebデザイナー)

日にち2015/1/24
コーディング

Glitchを取り入れてカッコいいWEBサイトにする方法

この記事は書いてから 約 3年 経過しています。 1年以上経過しているので情報が古い可能性があります。

Glitchを取り入れてカッコいいWEBサイトにする方法

Glitchは電子回路のバグで起こるノイズです。(上の画像は普通の画像をGlitchを何回も重ねて作った画像になります。)jQueryやcssを少し追加するだけで、ちょっとしたアクセントになったりします。ただし、やり過ぎは注意が必要です。

Glitchが出来るプラグイン等を紹介します

今回はGlitchの紹介になりますので、コードは無しです。参考ページを載せときますのでそちらで確認してください。

jQuery Glitch Plugin

画像をグリッチさせたい時に使うと便利です。試しに使ってみるのにはおすすめです。

参考:http://okikata.org/study/test28/

glitch.js

画像のみやdivごとGlitchを掛ける事ができる様です。glitch.jsは工夫しだいで色々な事が出来るので良さそうです。基本は3パターンの使い方があるみたいです。また、html2canvas.jsが必要になってくるのでこちらもダウンロードしましょう。

DL:https://github.com/sjhewitt/glitch.js/

HYPERGLITCH

このjQueryはよくお世話になっています。とても使いやすいです。idやclassでの指定なので画像もテキストもdiv全体にグリッチする事が可能です。

DL:http://hyperglitch.com/dev/glitch-jquery-plugin

CSS Glitched Text

最後はcodepenに上がってるGlitchを1つ。codepenで探すと沢山Glitchエフェクトのコードがあるので探すと楽しいです。

参考:http://codepen.io/lbebber/pen/ypgql

facebook twitter

© 2013-2017 visual hallucination.