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. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  3. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  5. Zoomerang.js
  6. no-image

コメント

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP