コップに入った水風のレンジ入力ウィジェット
ドラッグ＆ドロップで目盛りを調整するだけでなく水のようにアニメーシ...(続きを読む)

CSSとSVGを使って画面をクールに切り替えるサンプル
​次のようにかなり複雑な画面の切替効果を作れます関連エントリ 超...(続きを読む)

これは新しいグリッド型メニュー「Expanding Grid Menu」
メニューを開くとアニメーションしながらグリッド型のUIのメニューが開...(続きを読む)

Github風絵文字のオートコンプリートを実現する「At.js」
textarea上で:を押すと絵文字の候補が現れて入力しやすくなります関連エン...(続きを読む)

斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」
スワイプでびよーんと画像が切り替わります関連エントリ 日付や時間を指...(続きを読む)

WebGLをつかったクールなホバーエフェクト実装デモ
WebGLを使っているだけあって今までWEB上では見たことのないようなホバー...(続きを読む)

Web上で3D Touchに対応させる「Pressure.js」
iPhoneで強く押す3D touchをハンドリングできるライブラリ。非対応端末でも...(続きを読む)

巨大データでも高速に動作する「jquery.dgtable」
数万行における巨大なテーブルも高速に表示し、ソート機能やフィルタ機...(続きを読む)

ランダムIDを生成できるJSライブラリ「Nano ID」
ロードすると関数で簡単にランダムIDを生成できます関連エントリ JSベー...(続きを読む)

ブラウザ上でリアルタイム顔認識JS「pico.js」
特に真新しいも物ではなくなったかもしれませんが、200行、2kbという軽量...(続きを読む)

通貨を扱う際のユーティリティ「currency.js」
通貨を文字列から数値に戻したり計算したり、再度、特定通貨上での表示...(続きを読む)

ボタンを押すと細かく崩れていく風エフェクト実装「Particle Effects f...
関連エントリ SVGとanime.jsを使った機敏に動くツールチップ実装「Playful Littl...(続きを読む)

CSS3で簡単アニメーション「MotionCSS」
豊富なアニメーションがclass指定で簡単に実現できるライブラリ関連エン...(続きを読む)

複数選択、検索が可能なselectボックス実装「multi.js」
複数のアイテムを選択するような場合にわかりやすく使いやすいUIが提供...(続きを読む)

JSのコードをSVG形式のフローチャートにして見やすくする「js2flowcha...
ソースコードの解析や学習等、ビジュアライズして初心者でも見やすく表...(続きを読む)

JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」
背景をファンシーかつポップに。Flash時代を思い出します関連エントリ CSS3...(続きを読む)

ブロック要素をWebGLでカーテンのようにたなびかせる「curtains.js」
画像などをグリグリ動かすデモなんかもあって実用性だけでなく一見の価...(続きを読む)

マウスでなぞると反応する背景イメージを作成する「Brusher」
背景部分をホバーすると背景画像のブラーがなくなり、通常画像が表示さ...(続きを読む)

横スクロールできるよ、というヒントを表示する「ScrollHint」
縦スクロールが当たり前のページ内で横スクロールできるというのは意外...(続きを読む)

ブロック要素をインタラクティブに傾けて立体的に表示できる「uni...
次のようにマウスホバーで平面的な要素を立体的に傾けて表示させられま...(続きを読む)