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. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  2. Responsive Elements
  3. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  4. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  5. no-image
  6. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP