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. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  2. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  3. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  6. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

コメント

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

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

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP