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. Animated Toggle Menu
  2. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  3. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  4. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  5. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  6. stickyTableColumns

    JavaScript

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

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

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP