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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  3. Chameleon.js
  4. no-image
  5. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  6. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP