• かちびと.net

    テキストにアイソメトリック風のエフェクトを加えるjQueryプラグイン・JQISOTEXTのご紹介。テキストにアイソメ図のようなエフェクトをかけることが可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

テキストにアイソメトリック風のエフェクトを加えるjQueryプラグイン・JQISOTEXT

スポンサーリンク

なかなかユニークだったのでメモ的に。
普通のテキストに等角投影法を使った
ようなエフェクトを加えるjQueryプラグ
インです。画像ではなく、テキストのみ
でちょっとしたタイポグラフィも作れそう。
IE6でも7でも動作してくれますよ。

アイソメトリックとは建築でよく使われる投影法で奥行きを表現した図(ここの説明が分かりやすいです)に用いられます。一般的には「アイソメ」と略されますが、これをテキストに用いる事が出来る、というもの。

JQISOTEXT


こんな感じで。普通にテキストなのでドラッグも可能です。大抵は画像で作らざるをえない表現ですが、テキストなら編集しやすいでしょうし、上手く使えばSEO的にも有利に働いてくれるかも知れませんね。

IE6でも問題無し


IETesterを使ってのIE6。問題無しです。

使い方

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqIsoText.min.js"></script>
<script>
	$('.example01').jqIsoText();
	$('.example02').jqIsoText({fromSize: 25, toSize: 50 });
	$('.example03').jqIsoText({ fromSize: 50, toSize: 90 });
	$('.example04').jqIsoText({ fromSize: 50, toSize: 15 });
	$('.example05').jqIsoText({split:'yes'});
</script> 

jQueryとプラグインを読み込んで設定すればいいだけ。上記例では.example01セレクタがデフォルトです。.example05は波打。

なかなか目立っていいのでは。css3等も工夫して使えば素敵なタイポグラフィも作れそうですね。デモも以下でご覧になれます。

JQISOTEXT: JQUERY TEXT EFFECT PLUGIN

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services