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

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  4. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  5. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  6. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP