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

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

使用方法
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>

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

sponsors

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

記事作成:
記事URL:

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