[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS

jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。

デモのキャプチャ

Humane JS
デモページ

[ad#ad-2]

上記デモの「Welcome Back」の通知パネルは、下記のスクリプトで実装されています。

JavaScript

humane("Welcome Back");

通知パネル内のテキストにはHTMLも使用可能で、スタイルシートを利用することも可能です。

デモのキャプチャ

JavaScript

humane("<p style='color:red'>Invalid Username and/or Password</p>");

[ad#ad-2]

スクリプトのオプション

スクリプトのオプションでは下記を設定できます。

  • 通知パネルの表示時間
  • 表示時間終了後、マウス・キーボード操作があるまで表示
  • 新しい通知パネルがすぐに表示されるかどうか

対応ブラウザ

  • Internet Explorer 6+
  • Firefox 3+
  • Chrome 9+
  • Safari 3+
  • Opera 10+

スクリプトのダウンロード

スクリプトは下記ページからダウンロードできます。

sponsors

top of page

©2018 coliss