Textualizer

JavaScript

テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer」

フェードやスライドといった様々なエフェクトをテキストに与えながら切り替わっていくjQueryプラグイン「Textualizer」を使ってみました。とても滑らかで動きがおもしろいので、テキストに集中しちゃいますね。注目させたいテキストなどがあれば効果的かと思います。以下、使い方です。

[ads_center]

使い方

head内にjQueryとダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="textualizer.js"></script>

次に、オプションや目的のテキストを記述していき、Textualizerをセットしていきます。

<script type="text/javascript">
$(function() {
    var list = ['サンプル01', 'サンプル02', 'サンプル03']; // 目的のテキストを指定
    var txt = $('#sample'); // id名を指定
    var options = {
        duration: 1000,
        rearrangeDuration: 1000,
        effect: 'random',
        centered: true
    }

    txt.textualizer(list, options);
    txt.textualizer('start');
});
</script>

そして、指定したid名を表示させたい場所に記述していきます。

<!-- Textualizerを表示 -->
<div id="sample"></div>

ちなみに、指定したidにはwidthとheightを設定しないと動かなかったので、CSSで設定しておくといいかと思います。

ということで、Textualizerの使い方についてでした。

ダウンロードは以下からどうぞ。

関連記事

  1. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  2. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  3. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  4. Relocator
  5. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  6. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP