JavaScript

テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけてくれるjQueryプラグイン「jqIsoText」です。テキストを中央に向かうにつれて大きくしたり、またはその逆にしたりすることができます。画像ではなくてテキストなのでちょっとした変更も簡単にできるのでいいですね。以下使い方です。

[ads_center]

使い方

使い方はこれ以上ないくらい簡単です。jQueryとプラグインを読み込みます。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqIsoText.js" type="text/javascript"></script>

エフェクトをかけたいテキストです。

<div class="sample">sampletextsampletext</div>

あとはプラグインをセットして完了です。

<script>
$(".sample").jqIsoText();
</script>

オプション

オプションは全部で3つあります。

fromSize

一番小さい文字サイズを指定します。

toSize

一番大きい文字サイズを指定します。

split

yesかnoを指定します。デフォルトはnoです。yesにするとスペースで文字を区切った時にまた最初からエフェクトがかけられます。

以下はオプションです。

<script>
$(".sample1").jqIsoText();
$(".sample2").jqIsoText({fromSize: 50, toSize: 10});
$(".sample3").jqIsoText({fromSize: 5, toSize: 100});
$('.sample4').jqIsoText({fromSize: 50, toSize: 10, split: 'yes'});
</script>

ということで、大胆に使ってみてもいいし、ちょっとしたアクセントにも使えるのでオススメです。以下からダウンロードできます。

タイポグラフィを向上させるjQueryプラグイン15前のページ

Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」次のページ

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  2. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  3. Animated Toggle Menu
  4. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  5. Sticky Multi Header Scroll
  6. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP