文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」

文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」サンプル 朝食ではカリッと焼きあがったベーコンが必要という方もいるかもしれません。
そんなベーコン好きにはたまらないプラグイン「It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.」はベーコンの形みたいに、文字を曲げて表示することが可能です。

使用方法 hudsonfoo/jQuery-Bacon ? GitHubからファイル一式をダウンロード。
<link rel="stylesheet" href="bacon.jquery.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="bacon.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#id名").bacon({
'type' : 'bezier',
'c1' : { x : 10, y : 0 }, //カーブ1の位置
'c2' : { x : -115, y : 170 }, //カーブ2の位置
'c3' : { x : 35, y : 340 }, //カーブ3の位置
'c4' : { x : 15, y : 420 }, //カーブ4の位置
'align' : 'left' //テキストの寄せ
});
});
</script>

あとは曲げたい要素にidを付与すればOKです。
<div id="id名" style="height:450px;width: 200px;>
テキスト
</div>

また、一定の間隔で一直線に曲げたいという場合には下記のようなscriptを記述します。
<script type="text/javascript">
$(function() {
$("#id名").bacon({
'type' : 'line',
'step' : 5, //間隔
'align' : 'left' //テキストの寄せ
});
});
</script>

文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」サンプル

sponsors

「文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」」をシェアする

記事作成:
記事URL:

TOP > > > 文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」