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. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  2. Vimeo Carousel Gallery
  3. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  4. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  5. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  6. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP