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. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  2. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  3. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  4. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  5. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  6. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP