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プラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  2. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  3. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  4. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  5. GoogleSheets-HTMLImporter
  6. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

コメント

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP