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

関連記事

  1. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  2. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  3. no-image
  4. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  5. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  6. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP