フロントエンド実装のアイディアに!CodePenで見つけた近未来表現6選

こんにちは、小川です。
ついこのあいだ、僕がもっとも好きなゲーム「メタルギアソリッド」の新作が出ました!その名もファントムペイン。
毎晩、BIGBOSSことスネークとアフガンのソ連軍基地に潜入しています。

ところでウェブサイトのフロントエンド(おもに見た目の領域)を実装するうえで、アイディアの種がほしい!ってこと結構ありますよね。そんなときはCodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術(HTML / CSS / JavaScript)のコードの共有や外部サイトへの埋め込みができるサービスです。

おお、すげえな………と感動してしまうレベルのコードが普通に投稿されていて驚きます。ついついそっちのけでページをめくってしまう。きょうはそんなCodePenの中でも近未来的な表現に使えそうなアイディアをみなさんにご紹介します。

Farflight background

See the Pen Farflight background by Edwin Rodriguez (@edwrodrig) on CodePen.

ラインとレインボーの色使いがなんとも未来的。マウスの動きに合わせて視点が移動します。

rainbow simple-motion particles

See the Pen rainbow simple-motion particles by Matei Copot (@towc) on CodePen.

うおおおおおあ。めっちゃ未来。

Infinite Cubes CSS

See the Pen Infinite Cubes CSS by Nate Wiley (@natewiley) on CodePen.

カクカクと黒背景。それが僕のイメージする近未来みたいです。

rOYJJE

See the Pen rOYJJE by webull (@micheljerome) on CodePen.

TRON LEGACYとか、SF映画のキャラが使いこなすコンピューターのインターフェースっぽい感じ。

Constellations

See the Pen Constellations by Mads Cordes (@Mobilpadde) on CodePen.

有機的な線と点の動きが星座にもネットワークにも見えますね。

Three.js EffectComposer

See the Pen Three.js EffectComposer by Ryo Nakae (@ryonakae) on CodePen.

映像の乱れが過去視点からの未来っぽさを表現しています。

いかがでしょうか。アイディアがほしいデザイナー、フロントエンドの開発者のみなさんもぜひ参考にCodePenを見てみてください。

CodePen

http://codepen.io/