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/