[JS]そのアイデアに脱帽!ひと味違う使い方が面白いツールチップのスクリプト -thoughtBubble

マンガやアニメのように、てん、てん、てん、ぽわーんと思っている事を吹き出しのアニメーションで表示するjQueryのプラグインを紹介します。

アニメーションで表示するツールチップですが、アイデアが面白いですね。

デモのアニメーション

thoughtBubble -GitHub

thoughtBubbleのデモ

デモでは作者の考えている事を見ることができますw

デモのキャプチャ

デモページ

デモのキャプチャ

デモは英語ですが、日本語のメッセージを表示することもできます。

thoughtBubbleの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="../src/jquery.thoughtBubble.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src='../src/jquery.thoughtBubble.js'></script>
</body>

Step 2: HTML

thoughtBubbleを表示する画像などに、idを付与します。

<img src='image.jpg' id="thoughtBubble" />

Step 3: JavaScript

jQueryのセレクタでthoughtBubbleを表示する要素を指定し、テキストを記述します。

<script type="text/javascript">
  $(window).ready( function() {
    $('#thoughtBubble').thoughtBubble({
      text: '表示するテキスト',
    });
  });
</script>

カスタマイズ

吹き出しのデザインを変更する時は、スタイルシートの「.bubble-holder」を見てください。

sponsors

top of page

©2018 coliss