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. jQuery touchSwipe Carousel
  2. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  3. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  4. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  5. Accessible Mega Menu
  6. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

最近の記事

  1. Hermèsオレンジスポーツバンド
  2. GoPro HERO8 Black
  3. 16インチMacBook Pro

アーカイブ

PAGE TOP