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. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  2. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  3. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  6. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP