Toast

JavaScript

アニメーション付きでスタッキングしていくメッセージ通知「Toast」

Toastはアニメーション付きのメッセージ通知を表示することができるjQueryプラグインです。最大の特徴は通知が増えるにつれてスタッキングしていくことです。カスタマイズもできるのが良いですね。

Toast

デモ

デモではボタンをクリックする度にフェードアニメーションでメッセージが次々に表示されていきます。どんどんスタックされていくのがおもしろいですね。

綺麗に整列されるのでとても見やすいです。通知内の右上にあるバツ印をクリックするとメッセージが消えていきます。

さりげない自然な感じのアニメーションが良いですね。

ちなみにアニメーションエフェクトはフェードの他にもスライドとプレーンなタイプが用意されています。

というわけで、スタッキングしていくメッセージ通知機能を実装することができるjQueryプラグイン「Toast」のご紹介でした。

スライド機能がついたプロダクトギャラリーを実装できる「Product Preview Slider」前のページ

ChromeでURL欄にカーソルを合わせる(ハイライト表示)ショートカットキー次のページURLをハイライト表示させるショートカットキー

関連記事

  1. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  2. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  3. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  4. no-image

    JavaScript

    レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

    tinyslideはレスポンシブに対応した超軽量なイメージスライダーを…

  5. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  6. GRT Responsive Menu

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP