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. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  2. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  3. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  4. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  5. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  6. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP