Text Rotator

JavaScript

特定のテキストをアニメーションしながら入れ替えていくjQueryプラグイン「Text Rotator」

Text RotatorというjQueryプラグインを使えば特定のテキストをアニメーションしながら入れ替えていくことができます。アニメーションの種類はオプションで設定することができ、フェード、フリップ、スピンといった様々なものが用意されています。というわけで以下は使い方です。

[ads_center]

Text Rotatorの使い方

Text Rotator

Text Rotator

このように、文の中の特定の場所にある文字がどんどん入れ替わっていきます。強調したい単語がある時なんかに使えば視線を集めることができますね。

HTMLをマークアップするときは、span内に入れ替えたいキーワードを指定します。

text <span class="rotate">sample1, sample2, sample3</span> text

以下はText Rotatorの呼び出し。

$(".rotate").textrotator({
    animation: "dissolve",
    separator: ","
    speed: 2000
});

オプションもわかりやすいですね。animationの値は、デフォルトではdissolveになっています。この他にも以下のアニメーションを指定することができます。

  • fade
  • flip
  • flipUp
  • flipCube
  • flipCubeUp
  • spin

関連記事

  1. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  2. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  3. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  4. jQuery Panorama Viewer

    JavaScript

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

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

  5. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  6. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

コメント

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

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

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP