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で実現されているのをみると、レベルの高さが半端ないです。 もちろんライブラリ使用なのですが、これを実用させるイメージが未だに湧きません。
0 件のコメント:
コメントを投稿