【あなたは何色?】IPアドレスを取得して動的にrgbaを表示させるjavascriptを書いてみた

web制作

color

人はそれぞれ異なる「色」を持っていて、時に変化したり光ったりすると思います。今回は、そんな「動き」や「透明感」を表現しようと思い、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アニメーションでゆらゆら波打つように色が変わるとかも、試してみたいですね。
 

color

この記事が気に入ったら
いいね!しよう

orange plus music
の最新情報をお届けします

このブログを書いている人
石松 豊 (がちゃーん)

デジタルマーケティング会社からweb制作/メディアの会社へ。個人でも主に音楽関連の広告やサイト制作の仕事をしています。インターネットで音楽をもっとおもしろくしたい。

そのほか情報やご連絡はABOUTページからどうぞ。

profile

広告