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();
});

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

関連記事

  1. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  2. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  3. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  4. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  5. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  6. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

コメント

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

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

最近の記事

  1. マーガレットハウエルとミズノのコラボシューズ
  2. フレンチトーストや自家製ソーセージ
  3. ハレイワ スムージー
  4. クローバーで淹れたコーヒー
  5. 雪が降る日本海

アーカイブ

PAGE TOP