JavaScriptでマトリックスコード風のアニメをWebページの背景に表示する方法

Webサイトの管理画面を作っていて、デザイン的に「無味乾燥だよなー」と感じました。

そこで、彩りを添えるために、視覚的なエフェクトを付けてみようと思いました。

f:id:hamamuratakuo:20160923150235j:plain

●サイバーパンク

管理画面で気分をアゲるには、デジタルなサイバーパンクが合ってるかな？

→サイバーパンクと言えば、パッと思いつくのはMATRIXです。＼(古典)／

マトリックス特別版 [DVD]

キアヌ・リーブス

Amazon

マトリックスリローデッド特別版 [DVD]

キアヌ・リーブス

Amazon

マトリックスレボリューションズ特別版〈2枚組〉 [DVD]

キアヌ・リーブス

Amazon

映画「マトリックス」で、コンピューターの画面上を緑の文字が流れる映像がありますが、あれは「マトリックスコード」と言うんですね。＼(今知った)／

・マトリックス (映画) - Wikipedia

オープニングの黒い画面にグリーンの文字が流れる通称「マトリックスコード」

そんなわけでマトリックスコードをWebページの背景に表示させてみましょう！＼(唐突)／

●JavaScriptでマトリックスコード

最初は、アニメGIFのマトリックスコードを使おうと思いましたが、Google検索していたらJavaScriptで作られたマトリックスコードが紹介されていたので、そっちを使うことにしました。

gigazine.net

cssdeck.com

そうそう、これこれ！！！

それにしても、こんな短いプログラムで表現できるんですね！★作者はスゴイ★

JavaScriptコードの解説や改造方法も紹介されていました。

sites.google.com

●サンプルコード

以下のような形で、マトリックスコードを背景として入れたWebページを作ってみました。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Code</title>
<style TYPE="text/css">
body {
width: 100%;
margin: 0;
padding: 0;
}
body #wrapper {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
position: fixed;
transform: rotateY( 180deg );
}
#container {
position: absolute;
top: 0;
right: 20px;
left: 20px;
}
</style>
</head>
<body style=margin:0 onload="for (s = window.screen, w = q.width = s.width, h = q.height = s.height, m = Math.random, p = [], i = 0; i < 256; p[i++] = 1); setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)9Style=\'#0F0\';p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext(\'2d\').fill'), 33)">

<div id="wrapper">
<canvas id="q"></canvas>
</div>

<div id="container">
ここにコンテンツを入れる
</div>
</body>
</html>