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

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  2. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  3. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  4. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  5. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  6. Erge Drop Down Menu Control

コメント

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

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

最近の記事

  1. 渋谷スクランブルスクエアからの夜景
  2. BELTZのバスクチーズケーキ
  3. iPhone 11 Pro Smart Battery Case ホワイト
  4. 渋谷スクランブル交差点

アーカイブ

PAGE TOP