funnyText.js

JavaScript

垂直・水平方向に文字が移動するアニメーションを実装できるjQueryプラグイン「funnyText.js」

funnyText.jsというjQueryプラグインを使えば、垂直や水平方向に文字が移動するアニメーションを実装することができます。見ていておもしろいアニメーションですね。ちょっとした導線づくりによさそうな感じです。以下は使い方です。

[ads_center]

funnyText.jsの使い方

funnyText.js

funnyText.js

各文字が次々に垂直・水平方向にアニメーションしていきます。アニメーションは、オプションでスピードやフォントサイズ、カラーなんかを設定することもできます。

使い方は、jQuery本体とプラグインを読み込みます。

<link rel="stylesheet" type="text/css" href="jquery.funnyText.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.funnyText.js"></script>

アニメーションを適用したい要素を記述します。

<div class="mySelector">sample text</div>

あとはプラグインをセットするだけです。

$(document).ready(function() {
    $('.mySelector').funnyText();
});

テキストにちょっとしたアニメーションをつけたい時に便利ですね。

軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」前のページ

jQueryプラグインでレスポンシブ対応のズーム機能付イメージビューア「Smoothproducts」次のページ

関連記事

  1. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

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

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  3. jquery-base-slider
  4. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  5. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  6. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP