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

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  2. Choice.js
  3. Presentation Slideshow
  4. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  5. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  6. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP