[JS]テキストをFlashのような美しいさまざまなアニメーションで表示するスクリプト -animateText.js

Flashのような美しいアニメーションで、複数のテキストをスライドやフェードなどで表示するjQueryのプラグインを紹介します。

animateText.js
animateText.js -GitHub

• animateText.jsのデモ
• animateText.jsの使い方

animateText.jsのデモ

ページ上部のデモでは、スライド、フェードなどのアニメーションで、テキストが次々に表示されます。

デモページ
※キャプチャは、スライドとフェードのミックス。

animateText.jsの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/animateText.js/js/animateText.js">
</script>

※linear以外のアニメーションも使用する時は「jquery-ui.js」も外部ファイルに加えます。

Step 2: HTML

テキストはリスト要素で実装します。一つ以上であれば、いくつでも構いません。

<ul id="example">
    <li>Kaboom!</li>
</ul>

Step 3: JavaScript

jQueryのセレクタでリストを指定し、アニメーションを設定し、スクリプトを実行します。

<script type="text/javascript">
    $("#example").animateText([
            {
                offset: 0,
                duration: 1000,
                animation: "explode"
            }
    ]);
</script>

テキストを複数にした場合は、「,」で繋げます。

<script type="text/javascript">
    var textObjects = [
        {
            offset: 0,
            duration: 2000,
            animation: 'leftToRight'
        },
        {
            offset: 1000,
            duration: 2000,
            animation: 'rightToLeft'
        },
        {
            offset: 2000,
            duration: 2000,
            animation: 'topToBottom'
        }
    ],
    options = {
        repeat: 5
    },
    animations = {
        topToBottom: {
            positions: {
                start: {
                    bottom: '100%',
                    left: '50%',
                },
                1:  {
                    bottom: '0%'
                }
            }
        }
    };
    $("#example").animateText(textObjects, options, animations);