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

stackyスライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」前のページ

スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」次のページSlideme

関連記事

  1. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  2. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  3. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  4. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  5. no-image
  6. imgViewer2

    JavaScript

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

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

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP