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. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  2. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  3. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  4. jQuery Pretty Dropdowns
  5. bcralnit.js
  6. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP