●や▲の形にテキストを流し込める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>

サンプル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum nibh sit amet est blandit ultricies. Curabitur nec pretium eros. Cras lacinia aliquet vehicula. Mauris leo lorem, posuere id molestie rutrum, vulputate sed velit. Quisque tincidunt dapibus accumsan. Vivamus a mauris nisl, a mollis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fermentum ante et odio dapibus pulvinar. Aenean aliquet imperdiet ipsum, ac tincidunt urna tempor in. Nunc scelerisque viverra turpis quis laoreet. Donec ac viverra leo. Fusce porta erat eu lectus ornare porttitor convallis dolor blandit. Fusce nec orci magna. Proin vulputate mattis ipsum, sit amet rhoncus risus dignissim eget. Integer elementum feugiat lorem, id mattis sapien rhoncus vel. Vivamus consectetur egestas ante, sit amet ornare dui ullamcorper sit amet. Morbi et tincidunt diam. Praesent sed laoreet sem. Sed malesuada mollis felis non blandit. Nam ornare tellus non ante pharetra elementum. Vivamus magna lacus, sagittis retium elit sit amet tincidunt. Vivamus hendrerit leo ut purus eleifend ac hendrerit nibh egestas. Nullam varius tellus non est tristique bibendum. Maecenas eu nisl vel nunc dapibus tempor at sit amet ipsum. Ut mattis massa et ipsum auctor eget tempor orci imperdiet. Integer vel purus sollicitudin velit suscipit adipiscing ut a augue.Pellentesque massa nibh, pellentesque sit amet sodales non, viverra eget velit. Ut semper mollis porttitor. Nam fermentum metus vel neque semper faucibus. Integer id ligula sed dolor. Nam lacus tortor, fringilla et laoreet eget, elementum sit amet nisl. Aenean nisl sapien, sodales gravida accumsan et, aliquet vitae nulla. Curabitur tempus laoreet velit, non porta nisi sodales quis. Pellentesque nec augue eu ligula auctor molestie. Suspendisse ac interdum libero. Phasellus sed libero. Mauris egestas volutpat velit, eu aliquet dolor congue vitae. Proin eget erat ac ligula facilisis dignissim id vitae purus. Quisque commodo elementum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum nibh sit amet est blandit ultricies. Curabitur nec pretium eros. Cras lacinia aliquet vehicula. Mauris leo lorem, posuere id molestie rutrum, vulputate sed velit. Quisque tincidunt dapibus accumsan. Vivamus a mauris nisl, a mollis velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fermentum ante et odio dapibus pulvinar. Aenean aliquet imperdiet ipsum, ac tincidunt urna tempor in. Nunc scelerisque viverra turpis quis laoreet. Donec ac viverra leo. Fusce porta erat eu lectus ornare porttitor convallis dolor blandit. Fusce nec orci magna. Proin vulputate mattis ipsum, sit amet rhoncus risus dignissim eget. Integer elementum feugiat lorem, id mattis sapien rhoncus vel. Vivamus consectetur egestas ante, sit amet ornare dui ullamcorper sit amet. Morbi et tincidunt diam. Praesent sed laoreet sem. Sed malesuada mollis felis non blandit. Nam ornare tellus non ante pharetra elementum. Vivamus magna lacus, sagittis retium elit sit amet tincidunt. Vivamus hendrerit leo ut purus eleifend ac hendrerit nibh egestas. Nullam varius tellus non est tristique bibendum. Maecenas eu nisl vel nunc dapibus tempor at sit amet ipsum. Ut mattis massa et ipsum auctor eget tempor orci imperdiet. Integer vel purus sollicitudin velit suscipit adipiscing ut a augue.Pellentesque massa nibh, pellentesque sit amet sodales non, viverra eget velit. Ut semper mollis porttitor. Nam fermentum metus vel neque semper faucibus. Integer id ligula sed dolor. Nam lacus tortor, fringilla et laoreet eget, elementum sit amet nisl. Aenean nisl sapien, sodales gravida accumsan et, aliquet vitae nulla. Curabitur tempus laoreet velit, non porta nisi sodales quis. Pellentesque nec augue eu ligula auctor molestie. Suspendisse ac interdum libero. Phasellus sed libero. Mauris egestas volutpat velit, eu aliquet dolor congue vitae. Proin eget erat ac ligula facilisis dignissim id vitae purus. Quisque commodo elementum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


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