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
  2. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  3. jquery.adaptive-backgrounds.js
  4. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  5. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  6. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP