こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
映画『マトリックス』の世界観といえば、緑色のバイナリーコードが縦に流れる、あの印象的な映像表現ですよね。
実はこの「デジタルレイン」エフェクト、CSSとJavaScriptを組み合わせることで、Webサイトの背景に簡単に再現できます。
この記事では、「背景に流れるバイナリーコード」をWeb上で表現する方法を、実装コード付きでわかりやすく解説します。
演出として使えば、SF風やサイバー感のあるデザインが実現できるため、ポートフォリオやプロモーションサイトにぴったりです。
マトリックス風エフェクトの仕組み
この演出は「Canvas API」を利用して描画します。
スクリーン上を複数の縦列に分割し、それぞれに数字や文字をランダムに落としていくことで、雨のように流れるコードを表現します。
- 縦に流れる文字列をCanvasで描画
- 各列ごとに速度や開始位置をランダム化
- 背景は黒、文字は緑に設定して雰囲気を再現
実装コード
以下は、実際に背景に「流れるバイナリーコード」を再現するデモコードです。
そのままコピペすれば動作します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用アイデア
基本のコードを改造すると、さらにオリジナリティを出せます。
- 色を変える — 緑ではなく青や赤で描画すれば、世界観が大きく変化。
- 文字を変える — 「01」以外にアルファベットや日本語を混ぜてSF感を強調。
- 速度調整 — setIntervalの値を変えると、ゆっくり流れたり、高速で流れたり。
- インタラクション追加 — マウスの動きやスクロールに連動させて動的な演出に。
まとめ
「マトリックス風」の流れるバイナリーコードは、CanvasとJavaScriptの組み合わせで比較的シンプルに実装できます。
背景演出として取り入れると、サイト全体にインパクトを与え、訪問者の記憶に残るデザインになります。
ぜひ応用して、独自のサイバー空間を表現してみてください。
背景演出として取り入れると、サイト全体にインパクトを与え、訪問者の記憶に残るデザインになります。
ぜひ応用して、独自のサイバー空間を表現してみてください。
satokotadesignキャンペーン実施中！
