JavaScript

テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

テキストで指定した一部分をサラっとアニメーションさせる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。

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

関連記事

  1. jquery.adaptive-backgrounds.js
  2. Expanding Bar Navigation Concept
  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  4. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  6. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP