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の使い方についてでした。

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

Screen Capture (by Google)Chromeでサイト全体のスクリーンショットなども撮って編集もできる拡張機能「Screen Capture (by Google)」前のページ

Macのマウス操作でコピペがかなり捗るアプリ「PopClip」次のページPopClip

関連記事

  1. Blindify
  2. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  3. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  4. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  5. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  6. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

コメント

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

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

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP