●や▲の形にテキストを流し込める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」サンプル
コメントする
記事作成：2010年6月16日 09:26
