文章中の任意のキーワードをアニメーションしながら定期的に別のキーワードに置き換える軽量jQueryプラグイン・dynamo.js

Ads

珍しい感じだったのでご紹介。軽く
目を惹かせる事が出来そうな感じ。
文章中の特定のキーワードを、
定期的に別のキーワードに置き換える
事が出来ます。アニメーションさせ
るので部分的に目立ちそうですね。

うまく説明できないので動作サンプルをご覧頂ければと思います。

dynamo.jsサンプル


スピードなども調整可能です。用途は限られますけどちょっと面白い。1~2KBと軽量なのもいいですね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script>
<script type='text/javascript' src='dynamo.js'></script>

本体とプラグインを読み込みます。セレクタがプラグイン内に書かれていたので必要に応じて変えてください。

で、設定はdata属性を使います。

<p>今日の天気は<span class="dynamo" data-lines="あめ,曇り,微妙" data-delay="2000" data-speed="100">晴れ</span>です。

インライン要素にdynamoというclassを与えてdata属性を使用。data-linesの中でコンマで切り替えるキーワードを羅列させます。

切り替わるまでの待ち時間はdata-delay、アニメーションスピードはdata-speedを使います。

ただ、シンプルなプラグインなので、文字数が違う場合に幅寄せしてくれる、といった配慮はありませんでした。ご利用は以下よりどうぞ。

dynamo.js