2017月07月07日

30分でイケてるCSSアニメーションをコミットする!

CSSアニメーションを作りまくる僕

CSSアニメーション を研究しています。
「いちにちいちUI」というテーマで、1日1個30分、ひたすら作り続けるというもの。
画像やJavaScriptを使わずにCSS3だけで、どこまでできるだろう。

ここにまとめたサンプルは、研究の過程で生まれ続ける産物たちです。
もはやUIではないものも多いですが、お楽しみください!

Punch

transform-origin をうまく使えば、ボーン表現ができる。

See the Pen いちにちいちUI: Punch by Yusuke Nakaya (@YusukeNakaya) on CodePen.

つまり、CSSで「骨格」を与えられたキャラクターを表現できるという事。
極めれば、テオ・ヤンセンの STRANDBEEST も再現できるかも!?

Gear

スチームパンクな歯車だって表現できる。

See the Pen いちにちいちUI: Gear by Yusuke Nakaya (@YusukeNakaya) on CodePen.

突き詰めるとシースルーのアナログ時計表現ができる。

Toast

チン!!

See the Pen いちにちいちUI: Toast by Yusuke Nakaya (@YusukeNakaya) on CodePen.

ただただ、食パンが食べたくて。
マヨネーズを周囲にかけて、中央に生たまご落として。

Angry Accordion

アコーディオンUIはよく使われる表現だけど、そういえば列の後ろに並んでる人たちにとって、「割り込み」って迷惑だよね。

See the Pen いちにちいちUI: Angry Accordion by Yusuke Nakaya (@YusukeNakaya) on CodePen.

animation@keyframes を使いこなせたら最強のCSSアニメーター。
アイデア次第で、これ本当にCSSだけ!? と驚愕と尊敬を集め、ドヤ顔可能。

Toggle Switch

トグルスイッチって、現実の操作系UIとして、とても気持ちいいUXを提供してると思う!!(個人的な趣味)

See the Pen いちにちいちUI: Toggle Switch by Yusuke Nakaya (@YusukeNakaya) on CodePen.

家の電気のスイッチがトグルだったらかっこいいのに。
でも、ぶつけたら痛そう。

Ring

CSSの3D表現は、どこまで出来るだろう。

See the Pen いちにちいちUI: Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen.

CSSではポリゴン1枚1枚にそれぞれ座標指定しないと立体表現ができない。
例えば、親要素に rotateX(90deg) を指定して、その子要素に rotateX(-90deg) を指定する。
これで期待する結果としては、子要素が「立ち上がる」ように回転して欲しい。
しかし実際は、親要素の平面的なテクスチャの中で回転するだけだ。
CSS4に期待…。

First

最初に生まれたサンプル。

See the Pen いちにちいちUI: First by Yusuke Nakaya (@YusukeNakaya) on CodePen.

よかったらこれをForkして、 CSSアニメーション 30分クッキング してみませんか!
Pug/Sass(SCSS)ですがシンプルな構成になってるので、今すぐ始められて30分後には1個コミットできます!

なぜ30分?

「こいつに頼んでおけば 30分で最高のアウトプットが期待できる
これが一番クールで市場価値の高いクリエイターだと思うからです。
そうなるために、日々鍛錬…

増えていくサンプル集

CODEPEN いちにちいちUI コレクション
https://codepen.io/collection/XoYpMj/

RELATED POSTS