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

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  2. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  3. jQuery UI Month Picker Plugin
  4. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  5. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  6. Material Design Responsive Table

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP