iziToast

JavaScript

エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

iziToastは、エレガントでレスポンシブに対応した軽量のトーストを実装することができる通知プラグインです。jQueryなどへの依存性がないのも特徴の1つです。お洒落なトーストを実装したい人は要チェックです。

iziToast

デモ

EXAMPLESには、Info、Success、Warning、Error、Question、Custom I、Custom IIの7種類のサンプルが用意されています。

各サンプルをクリックすると、それに対応したトーストが表示されます。スライド、バウンス、フリップなど、どのアニメーションもさりげない動作でとてもエレガントな印象です。

デザインもシンプルで見やすく、レスポンシブにも対応しているのでPCでの閲覧はもちろん、スマホからでも最適なレイアウトで閲覧することができます。

また、使い方が簡単なところもうれしいポイントの1つです。セッティングできるオプション項目の数もかなり豊富なので、カスタマイズ性にも優れています。

タイトルやメッセージのカラーやサイズ、背景カラーやテーマの指定など、さまざまな設定がオプションから行えます。

ちなみに、themeにはlightかdarkを、colorにはblue、red、green、yellowの値を指定することができるほか、positionにはbottomRight、bottomLeft、topRight、topLeft、topCenter、bottomCenter、centerという値が用意されています。positionのデフォルト値はbottomRightになります。

このほか、icon、iconText、iconColor、image、imageWidth、maxWidth、zindex、layout、balloon、close、closeOnEscape、rtl、target、targetFirst、toastOnce、timeout、animateInsideなど、まだまだたくさんのオプションがあるので、気になる人はぜひチェックしてみてください。

iziToast

jsPanel高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」前のページ

モバイルライクなナビゲーションメニューを実装できる「Slinky」次のページSlinky

関連記事

  1. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  2. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  3. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  4. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  5. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  6. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP