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

    JavaScript

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

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

  2. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  3. 4PXMMenu

    JavaScript

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

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

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  5. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  6. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

コメント

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

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

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP