使い勝手のよさそうなjavascriptやCSSサンプルまとめ – 2013年4月11日

最近（と言ってもこの1ヶ月ぐらい）見かけたjavascriptやcssなどのプラグインやサンプルなどで使い勝手のよさそうなものや面白そうなものをまとめてみました。

後で実際サンプルも作ってみて使い勝手を試すための備忘録です。

CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」[to-R]

記述もメンテもしにくいCSS3アニメーションをFPSベースで簡単に記述できるスクリプト。CSSだけで実現できることにjsかませるのってどうなの？という気もするけどメンテ性とかを考えると便利かも。

Responsive Nav — Responsive Navigation Plugin

jQueryなどのプラグインでなく単体で動く軽量でレスポンシブなナビゲーションを実現するプラグイン。IE6など対応環境も広くアニメーションはCSS3を使ってるため滑らか。類似したものでjQueryプラグインのSidrというのもありましたが、スマホ（特にAndroid）で動作が怪しかったのでこちらのがよさそうです。

modernassembly windows · GitHub

スクロール系サイトで見かけるスクロールが足りなかったり行き過ぎたときに指定ポイントに調整してくれるjQueryプラグイン。

Navi.js

ページロードなしで切り替えてくれるjQueryプラグイン。URLやタイトルの切り替えブラウザの戻るなどにも対応しているけどIE8以下には対応してないので注意。

Thumbnail Grid with Expanding Preview | Codrops

Introducing SuperBox the re-imagined lightbox gallery

どちらもGoogle画像検索のようなアコーディオン展開されるギャラリーを実装してくれるjQueryプラグイン。SuperBoxの方が軽量のせいか他のブログなどで多く取り扱われてるけどThumbnail Gridの方がPC、スマホ共に動きが滑らか。

スマホ/デスクトップに対応した高速な2Dゲームレンダリングエンジン「pixi.js」| MOONGIFT

WebGLやCanvasに対応した2Dのゲームレンダリングエンジン。
サンプルとしてあるRUNpixieRUNというゲームをAndroidで試してみたところスムーズに動いたけどiPod touchだと何故かローディングから先に進まなかった…。
ダウンロードできるデモの中で描画の激しいのは流石にスマホでは重くなるけどiPod touch、Android共に問題なく動きます。