humane.js

JavaScript

シンプルでモダンなさりげない通知システムを実装できる「humane.js」

humane.jsはフレームワークなどに依存しないシンプルでモダンな通知システムを実装できるJSライブラリです。できるだけ邪魔に感じさせないユーザーエクスペリエンスを提供しつつも、ユーザーの注意を引きつける情報をしっかり通知してくれます。

ユーザーに配慮しつつもしっかり情報を通知

デモ

デモページ内の「Select a theme」から、好きなテーマを選択できます。ページ読み込み時は「libnotify」に設定されています。

その下にあるコードが書かれた各項目をクリックすると、通知が表示される仕組みです。ちなみに、libnotifyでは右上に通知がさりげなく表示されます。

カンタンな文字をはじめ、複数行に対応したり通知したあとに背景カラーが切り替わったりと、いろんなパターンを確認できるはずです。

テーマを「bigbox」に変更してみると、今度は画面の中央にデカデカと通知が表示されます。先ほどのテーマよりも目立ちますが、いずれにしろ通知が表示されてから数秒で消えていくのでユーザーにとっては邪魔に感じにくいと思います。

この辺りのバランスはとても絶妙ですね。テーマは他にも、boldlight、jackedup、original、flattyが用意されているので、気になる人は好きなテーマをチェックしてみてください。

アニメーションもさりげなく、ユーザーに配慮しつつもしっかり情報を通知して目を引きつけてくれます。

また、オプションには、timeout、waitForMove、clickToClose、timeoutAfterMove、addnClsといったものが用意されています。オプションを活用して自分好みのカスタマイズを施したい人にもうれしいですね。

サポートされているブラウザは、Internet Explorer 7+、Firefox 3+、Chrome 9+、Safari 3+、Opera 10+、iOS 4+、Android 2+です。ライセンスはMITとのこと。

humane.js

関連記事

  1. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  2. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  3. Responsive Elements
  4. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  5. Square Menu

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP