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. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  2. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  3. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  4. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  6. Responsive jQuery Pop Up Gallery

最近の記事

  1. Eufy RoboVac L70 Hybrid
  2. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP