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。

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

画像を右クリックから簡単にサイズやパス、容量などを確認できるChrome拡張機能「Image Properties Context Menu」前のページ

上質なjQueryプラグインをカテゴリー別に探したい時に便利なサイト「jquer.in」次のページ

関連記事

  1. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  2. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  3. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  4. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  5. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  6. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP