JavaScript

文字をアニメーション付きで次々に入替できるjQueryプラグイン「Words Rotator」

Words RotatorというjQueryプラグインを使えば、文字をアニメーション付きで次々に入替していくことができます。軽量でシンプルなところがいいですね。Webサイト内で注目してほしい文字の場所に使ってみるとよさそうです。

[ads_center]

Words Rotatorの使い方

以下から実際のデモを見ることができます。フリップしながら文字が入れ替わっていきます。

Words Rotator

デモ

使い方は簡単です。HTMLマークアップは、こんな感じで入替する文字を挿入したい場所にmyWordsというid名を付与したspanタグをセットしておきます。

<p>sample <span id="myWords"></span> sample text</p>

そしてJSを以下のように記述します。wordsには入替していくワードをセットします。

$(function () {
    $("#myWords").wordsrotator({
        words: ['word1', 'word2', 'word3']
    });
});

また、オプションも色々と用意されており、自動ループ、ランダム、アニメーションイン、アニメーションアウト、スピードなどを設定することができます。

Words Rotator

関連記事

  1. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  2. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  3. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  4. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  5. stickyNavbar.js
  6. shCircleLoader

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP