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

    JavaScript

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

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

  2. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  3. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  4. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  5. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP