【いますぐつかえるCSS3/JavaScriptコードサンプル】アイコン、タブパネル、Flexbox、スプライトアニメーションなど。

O14A0436
NIJILOGがネットで見つけた素晴らしいコードを紹介する【いますぐつかえるCSS3/JavaScriptコードサンプル】
思わず人に紹介したくなるほどのクオリティの作品ばかりですので是非コードも合わせてみてくださいね。

※タイマーをつかっている作品などはデモがうまく動かないことがあります。デモ内右下をマウスオーバーしてRERUNを押すか、直接プレイグラウンドで見てみてください。

クリックで形が変わるCSSアイコン

パッと見はふつうのアイコンなんですが、クリックするとアニメーションでアイコンが変化します。
クリックトグルのために3行ばかりのスクリプトが書いてありますがとにかくシンプルです。
こういうCSS3テクニックがたくさん出てくると楽しいですね。

See the Pen Animated Navicons by Hugo Darby-Brown (@hugo) on CodePen.

ジェダイでシスなライトセーバー風アニメーションCSSアイコン

上のクリックで形が変わるCSSアイコンにブラー効果をつけて、かっこいいライトセーバーのようなアイコンに仕上げました。
名前もそのままスターウォーズ・トグルアイコンアニメーションだそうです。

See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.

CSS3のFlexboxをつかったアニメーションデモ

次世代レイアウトテクニックとして絶賛注目中のFlexboxをつかったデモです。
要素は UL、LI だけで構成されていて、マウスオーバーで Flex が 1 から 3 に変化するようになっています。
詳しく調べてませんが IE が相変わらずダメらしいので実用は難しいかもしれませんが、今後に注目です。

See the Pen Flexbox outdatedbrowser.com style UI by David Lewis (@dp_lewis) on CodePen.

マウス移動でくるくるまわる、ちょっとかわったデモ

丸や四角のアイコンがクリックで入れ替わって、マウス移動にクルクルしながらついてくるかわったデモ。
回転の計算をやっているのでスクリプトがだいぶややこしいことになっています。僕はさっぱりわかりません……。
アニメーションはTweenMax.jsをつかってます。

See the Pen Animation smear by ayamflow (@ayamflow) on CodePen.

CSSだけでつくったタブパネル

ふつうはスクリプトをつかって実装するタブパネルをCSSだけでやってしまったデモ。
タブクリックの切り替えをスクリプトなしで実装するために、上部ラジオボタンの checked を利用しています。
ちょっとその発想はなかった!と関心しきりです。

See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.

スプライトアニメーションをわかりやすく表現したサンプル

イケてるサイトでちらほらと見るようになったスプライトアニメーションをコマ送りで見せてくれるデモ。
パラパラ漫画のように少しづつ動かした絵を一枚の画像にして(スプライト)、描画位置をずらすことで動きを実現しています。
このサイトのロゴも同じ仕組です。

See the Pen Steps Animation by simurai (@simurai) on CodePen.

スプライトアニメーションをわかりやすく表現したサンプル2

上のスプライトアニメーションをもうすこし噛み砕いたサンプルです。
そのうちどこかで試してみたいですね。

See the Pen CSS Sprite Sheet Animations by Johan Fagerbeg (@birjolaxew) on CodePen.

背景画像にCSSで動きを加えるアニメーションアイコン

アイコン画像の上に border で丸を書いて、タイムフレームをつかってまばたきしているようなアニメーションをつけています。
技術的にむずかしいところはないんですが、なるほどねーというアイデアな逸品。

See the Pen Animated Logo for Herr Brueckers by toto (@teetteet) on CodePen.

ぽわーんと広がって消えるエフェクトが美しいアイコンサンプル

アイコン自体はふつうの画像なんですが、まわりにぽわーんと出てくるエフェクトに注目です。
CSS の animation でキーフレームをつけているんですが、なかなか汎用性が高そう。
クリックエフェクトなんかにも使えそうですね。

See the Pen CSS3 Flat Circle/Round Icon Animation by Jascha Goltermann (@jascha) on CodePen.