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

フォトグラファーに最適なWordPressテーマ集フォトグラファーに最適なWordPressテーマ集前のページ

時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」次のページFlipClock.js

関連記事

  1. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  2. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  3. JavaScript

    リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker…

    おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライ…

  4. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  5. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  6. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP