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. How satisfied are you? Slider
  2. Erge Drop Down Menu Control
  3. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  4. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  5. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  6. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP