• かちびと.net

    ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!のご紹介です。滑らかな曲線にそってテキストを折り返すことが出来ます。

    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プラグイン・Bacon!

スポンサーリンク

ちょっと面白いプラグインだったので
備忘録。曲線に沿ってテキストを折り
返せるようにするjQueryプラグインで
す。新聞のようなレイアウトも組めそ
うです。用途はあまり無さそうですけ
ど、珍しいので覚えておきたい。

Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。

Bacon!


こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。


こういうのとか


こういうのも作れる。


IEでもなんとか動く。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bacon.jquery.js"></script>

jQueryとプラグインを読み込む。

$(".foo").bacon({
        'type' : 'bezier',
        'c1' : { x : 10,        y : 0  },
        'c2' : { x : -115,      y : 170 },
        'c3' : { x : 35,        y : 340 },
        'c4' : { x : 15,        y : 480 },
        'align'  : 'right'
    }
);

あとは曲線をオプションで描きます。細かい説明は不要ですよね。

プラグイン紹介サイトでデモがあって、数値も入力して試せるので触ってみては如何でしょう?

Bacon!

URL :
TRB :

Ads

Posts

Contact

Services