
人はそれぞれ異なる「色」を持っていて、時に変化したり光ったりすると思います。今回は、そんな「動き」や「透明感」を表現しようと思い、IPアドレスを取得して動的にrgba色を表示させるjavascriptを書いてみました。
こんな風に書いた
この最大12桁のIPアドレスを4つに分解します。
「.」で区切って、左から「r.g.b.a」の色を割り当てます。
今回は4つめだけ、225で割って小数点第2位までの値に変換します。
rgbaのaが0だと完全な透明になってしまうので、変換した後の値が0.1以下の場合は0.1を足すことにしました。
What’s Your Color?
あなたの色は、何ですか?
ちなみに僕はWi-Fiがrgba(106,188,39,0.13)、楽天モバイルがrgba(110,165,138,0.14)でした。
サムネイルの2色です。青が好きなんだけど、緑な人なんだろうか。
コードはこちら
IP取得はこちらを参考にPHPで。最後は#color-ipのdivの背景色をページ読み込み後に設定しています。
※参考:【javascript】IPアドレスを取得する方法 – ysklog
IPアドレス×その時の時間、という風に同じIPでも色が変わる仕組みとか、CSSアニメーションでゆらゆら波打つように色が変わるとかも、試してみたいですね。