bl6.jp

テキストで指定した一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」を使ってみました。なんか可愛いですね。ちょっとしたポイントに使えば目を引くことができるかと思います。複雑な機能もほとんどないので使いやすいですね。以下使い方です。

[ads_center]

使い方

jQueryとプラグインを読み込んで、dynamoをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="dynamo.js"></script>
<script type="text/javascript">
$(function(){
    $('.dynamo').dynamo();
    $('#pause_example').click(function() {
        $(this).dynamo_trigger();
    });
});
</script>

切り替える場所をspanで括り、data-〇〇でテキストやオプションなどを指定していきます。

<!-- サンプル1 -->
<p>サンプル<span class="dynamo" data-lines="です">テキスト</span></p>

<!-- サンプル2 -->
<p>ここはサンプル<span class="dynamo" data-delimiter="|" data-delay="1200" data-lines="です|かな|だよ">テキスト</span></p>

<!-- サンプル3 -->
<p>ここは「<span id="pause_example" class="dynamo" data-pause="true" data-lines="クリック（後）" data-center="true">クリック（前）</span>」で切り替わります</p>

これだけでspanに括られたテキストが切り替わります。

オプション

オプションは「data-〇〇」をspanに指定してきます。以下は各オプションです。

data-lines

アニメーションするテキストを指定できます。

data-speed

アニメーションのスピードを指定できます。デフォルトは350。

data-delay

アニメーションするまでの間隔を指定できます。デフォルトは3000。

data-center

テキストをセンター配置してくれます。デフォルトはfalse。

data-delimiter

アニメーションさせるテキストを複数指定する場合の区切り文字を指定します。data-linesでこの区切り文字を入れて複数のテキストを指定することができます。デフォルトは “,” です。

data-pause

アニメーションを自動で切り替わらないようにできます。デフォルトはfalse。

ということでちょっとしたアクセントに使ってみるのもおもしろいですね。以下からダウンロードできます。

dynamo.js