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

no-imageオシャレなスクロールエフェクトを実装できる「jQuery Smoove」前のページ

軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」次のページpell

関連記事

  1. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  2. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  3. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  4. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  5. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  6. AJAX Live Search

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP