利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」
2009年04月16日-
スポンサード リンク
Notimo Demos site
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。
次のリンクをクリックしてみてください。
→ 通知を表示してみる
ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。
スクロールしても、いやみではない感じにちゃんとついてきてくれます。
使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。
showは2回連続で呼び出しても、ちゃんと1個目と区別して表示してくれます。
<script type="text/javascript">
var notimooManager = new Notimoo();
// 通知を表示
notimooManager.show({
title: 'タイトル',
message: 'メッセージ'
});
// 同じように、2回目を呼び出しても、1回目の下に表示されます
notimooManager.show({
title: 'タイトル2',
message: 'メッセージ2'
});
</script>
notimooManager.show の引数には、どの位置に表示するか?(右上、左上等)、通知ボックスの幅、表示時間の指定などが出来るようです。
自動で消えるのではなく、クリックによって消えるようにすることも出来るようです。
Notimooを使えば、ユーザに対してなんらかの通知を行いたい際に、最適なUIを提供できそうです。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- Matter.jsとPaper.js を使った物理オブジェクトでコンテンツをマスクするデモ
- Three.jsでパーティクルが雨のように降り注ぐ実装デモ
- ホバーで文字がバラバラと集まるエフェクト実装
- ClipPathを使ったオシャレな画面切り替えスライドショー実装
- テキストをSVGを使って円形アニメーションさせるデモ
- Three.jsをつかった3Dなローディングアニメーション実装
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- 過去のエントリ