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

2014.06.6

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

[ads_center]

Morphextの使い方

Morphext

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

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

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

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

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

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

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

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