Notyf

JavaScript

シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させることができるVanilla JavaScriptによる通知プラグインです。jQueryを必要とせずに実装することが可能です。

Notyf

デモ

デモでは「Show success」と「Show alert」の2つのボタンが設置されており、各ボタンをクリックするとそれに対応した通知が表示されます。

PC版では画面右下に通知が表示され、一定時間が経過すると自動で消えていきます。アニメーションつきで表示・非表示するので、シンプルながらとてもスタイリッシュでカッコイイ通知を実装できます。

モバイル版では画面左下に通知が表示されます。こちらもアニメーションつきで動作します。

実装面では、jQueryに依存することなく使えるところがうれしいですね。また、オプションもいくつか用意されており、delay、alertIcon、confirmIconといった項目の設定が可能です。使い方もカンタンなので手軽に実装できるのもグッドです。

というわけで、レスポンシブに対応したシンプルでカッコイイ通知をWebページ内に表示させたいという人は、ぜひ「Notyf」をチェックしてみてください。

Notyf

4PXMMenu滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」前のページ

ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」次のページMirror Effect

関連記事

  1. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  3. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  4. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  5. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  6. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP