[JS]そのアイデアに脱帽！ひと味違う使い方が面白いツールチップのスクリプト -thoughtBubble
Post on:2014年8月4日
sponsors
マンガやアニメのように、てん、てん、てん、ぽわーんと思っている事を吹き出しのアニメーションで表示するjQueryのプラグインを紹介します。
アニメーションで表示するツールチップですが、アイデアが面白いですね。
thoughtBubbleのデモ
デモでは作者の考えている事を見ることができますｗ
デモは英語ですが、日本語のメッセージを表示することもできます。
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
