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>

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

関連記事

  1. Blindify
  2. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  3. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  4. flexible-bootstrap-carousel
  5. AJAX Live Search

コメント

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

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

最近の記事

  1. BALMUDA The Pure
  2. BALMUDA The Pot Chrome

アーカイブ

PAGE TOP