Toolgif

JavaScript

GIFアニメーションによるツールチップを実装できる「Toolgif」

ToolgifはGIFアニメーションを活用したツールチップを実装することができるjQueryプラグインです。指定した要素にマウスオーバーすると、GIFアニメーションが表示されます。一般的にテキストを表示することが多いツールチップですが、これはなかなか新鮮でおもしろいですね。

data属性の指定やカスタマイズもできる

デモ

ページ内には、ところどころにデモが設置されています。指定された要素にマウスオーバーすることで、GIFアニメーションを見ることができます。

具体的なToolgifの設置方法やマークアップなどの詳しい使い方も載っています。とてもシンプルに実装できるのがグッドです。

任意のHTMLタグ内にdata-urlやdata-tagなどのdata属性の値をセットできます。data-placeにはtopかbottomを指定することが可能です。ちなみにデフォルトはtopに設定されています。

また、カスタマイズすることも可能で、widthやheight、speed、borderRadius、textColorなどをセッティングできる項目も用意されています。表示するGIFの幅や高さ、スピードなどを変更したい人にはうれしいですね。

一般的なテキストを表示させるツールチップも便利ですが、GIFによるツールチップも新鮮でおもしろいと思います。GIFアニメーションを取り入れたツールチップを実装したい人は、ぜひToolgifを使われてみてはいかがでしょうか?

Toolgif

関連記事

  1. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  2. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  3. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  4. jquery.adaptive-backgrounds.js
  5. Flickerplate
  6. no-image

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP