[Codepen] シビれるプロジェクト紹介

Codepenはいつ見ても素敵なCSSコードが投稿されています。 サイト内で検索すれば、見つけられるんですが、日々見ていて勉強にもなるので、お気に入りのモノを貼り付けて紹介したいと思います。 https://codepen.io/

Simple Icon Color Space Visualization

サービスアイコンを3D描画

See the Pen Simple Icon Color Space Visualization by Hans Oksendahl (@hansoksendahl) on CodePen.

アイコン部分をマウスでグリグリ回転させられるんですが、遠近処理なども入っていてかなりの３Dエンジンっぷりです。 カラーモード別に配列を変更する演出などは、とても魅せられますね。

Infection

感染するキモいUI

See the Pen Infection by Eric Hebel (@JArgan76) on CodePen.

気持ち悪さMAXのコードです。 マウスでクリックした箇所にも増殖してきて、鳥肌が立つUIですね。 こんなのは、実際に仕事では使えませんが、何かの演出でアリなんでしょうか？

Heart shaped fill percent complete animation using GSAP, DrawSVG, & SVG Mask

ハートマークのプログレスバー

See the Pen Heart shaped fill percent complete animation using GSAP, DrawSVG, & SVG Mask by Ryan LaBar (@ryan_labar) on CodePen.

フィーリングカップル5:5を思わせるようなハートフルなプログレスUIです。 ハンドルを手作業でつけているところが非常にニクイですね。 embed表示だと、ブラウザサイズによっては画面が入りきらないので、気になる人は、リンク先で見てみてください。

React Audio | Beat Map

音付きシンセサイザー

See the Pen React Audio | Beat Map by Adam Giese (@AdamGiese) on CodePen.

シンプルなMIDIクリエーターです。 JSでだけで実現できるので、スマホのアプリもネイティブではなく、WEBブラウザで十分いけるという事でしょうね。 これをライブラリ使わずにネイティブコードで書きたい・・・

the difference

Reactシミュレーションみたいな

See the Pen the difference by Gerard Ferrandez (@ge1doot) on CodePen.

３Dエンジンではお馴染みのデモですが、JSで実現されているのをみると、レベルの高さが半端ないです。 もちろんライブラリ使用なのですが、これを実用させるイメージが未だに湧きません。