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. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  2. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  3. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  4. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  5. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  6. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP