Morphext

JavaScript

複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

MorphextというjQueryプラグインを使えば、複数テキストをアニメーションしながら次々に切り替えていくことができます。モーフィングとテキスト(Morphing + Text)が合わさっているのでMorphextというプラグイン名になっています。

[ads_center]

Morphextの使い方

Morphext

Morphext

実際のデモもあるので気になる方は是非チェックしてみて下さい。

シンプルな機能ですがちょっとしたアクセント、または視線を集めたい時なんかに役立ちそうですね。

切り替えていく文字はHTMLに設定していくことができるので、いつでも気軽に変更できます。

jQueryやプラグインファイルなどは予めhead内に読み込んだ状態で、以下のようにHTMLを記述します。

<span id="js-rotating">テキスト1, テキスト2, テキスト3</span>

で、Morphextをセットします。オプションでアニメーションタイプやスピードも設定することができます。

$("#js-rotating").Morphext({
    animation: "bounceIn",
    separator: ",",
    speed: 2000
});

というわけで、アニメーションを使って複数のテキストを切り替えていく機能を実装したい時に活用してみたいjQueryプラグインでした。

関連記事

  1. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  2. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  3. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  4. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  5. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  6. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP