• かちびと.net

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

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

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

URL :
TRB :

Ads

Posts

Contact

Services