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

2017年6月9日

テクノロジー まとめ

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。