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

code-1689066_1280
LINEで送る
Share on GREE
Share on LinkedIn

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.


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

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.


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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*