[JS]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext

サイト構築 -JavaScript

Post on:2014年5月27日

Morphextのデモ

デモではテキスト内のインラインで、複数のテキストがモーフィングで次々に変更されて表示します。

デモ

Morphextの使い方

Step 1: 外部ファイル

animate.cssと当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上あたりに記述します。

<head>
  ...
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
  <link rel="stylesheet" href="morphext.css">
</head>

<body>
  ...
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="morphext.min.js"><script>
</body>

Step2 :HTML

デモのようにインラインのテキストを次々にアニメーションで表示させる際は、下記のように記述します。区切りは「,」で複数のテキストを表示できます。

I am a <span id="js-rotating">So Simple, Very Doge, Much Wow, Such Cool</span> Text Rotator

Step 3: JavaScript

jQueryのセレクタで表示させる要素を指定し、スクリプトを実行します。

$("#js-rotating").Morphext({
    // アニメーションのタイプ
    animation: "bounceIn",
    // 区切り（パイプライン「|」などでも可
    separator: ",",
    // 表示するスピード
    speed: 2000
});

また、テキストをspanではなくリストで実装する「Morphist」もあります。