●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」

●や▲の形に、おしゃれにテキストを流しこんで見たいときはありませんか?
jQueryプラグインTextmorphなら簡単に実現可能です。
●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」サンプル
(追記:2010/6/16)FF3.6、IE8以外だと適用されないようです。

使用方法
Textmorphからjquery.TextMorph.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.TextMorph.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//円にする場合
var circle = new TextMorph(document.getElementById('circle'),{
width: 300,
height: 300,
lineHeight:15
});
});
</script>

あとは【circle】と言うidを対象テキストに付与すれば完成です。
<div id="circle">テキスト</div>
また、三角は下記のようにします。
下の例ではid、【triangletop】で要素をくくって下さい。
$(document).ready(function(){
var triangletop = new TextMorph(document.getElementById('triangletop'),{
draw:'triangletop',
width: 300,
height: 300,
});
});
</script>

●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」サンプル

sponsors

「●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」」をシェアする

記事作成:
記事URL:

TOP > > > ●や▲の形にテキストを流し込めるjQueryプラグイン「TextMorph」