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. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  2. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  3. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  4. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  5. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  6. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP