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. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  2. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  3. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  4. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP