これは面白い!アメコミマンガ風に表示するJavaScript「Fumetto」

単純にテキストを表示させるだけではつまらないので、こんな風に遊び心を出してみるといいかもしれません。
Fumetto 1.0はアメコミ風にテキストを吹き出しなどにしてくれます。
CSS3を利用しているのIE8以下などはちょっとあれです。

sponsors

使用方法

Fumetto 1.0からjquery.fumetto-1.0.jsをダウンロード。

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>	
<script src="jquery.fumetto-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.fumetto').fumetto();
});
</script>
次に吹き出し部分を作っていきます。

<div class="fumetto"> //全体
	<div class="panel"> //1個の枠
		<div class="text">ここにテキスト</div>
	</div>
</div>
上記が基本形です。
吹き出しにするには、以下のような記述をします。

<div class="
	speechL //左に表示
	w40 //幅40%
	x10 //x位置10
	y40" //y位置40
	>テキスト</div>
※ご想像の通り右に表示はsppechRです。
もこもこ系の吹き出しはこうします。
<div class="thoughtR">テキスト</div> thoughtR、thoughtLというようになります。
またem、b、strong、mark、aタグでテキストをくくるとテキストが装飾されます。
なお、パネルの幅自体も変更できます。
<div class="panel w50"> 50%になります </div>

サンプル

"fumetto 1.0"

...and so now maybe you're wondering what's this fumetto ??
hello guys!
hi, but who are you??
i am fumetto and i'm a jquery plugin. All what you see here is without any image!
mmmh... is he joking??
maybe you're wondering if i'm joking...
...anyway all here is done thanks to me and css3
is he reading my mind??



Javascriptサンプルページ一覧
skuare.net

sponsors