JavaScript

テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateText.js」

テキストに滑らかに動くかっこいいアニメーションをつけることができるjQueryプラグイン「animateText.js」を使ってみました。テキストがだんだん大きくなってきたり、右から左へ、左から右へ動いたりと色々なアニメーションがあります。サイトのトップページなんかに置くとインパクトがでそうですね。以下、使い方です。

[ads_center]

使い方

jQuery本体とプラグインを読み込んでanimateTextをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="animateText.js"></script>
<script type="text/javascript">
$(function(){
	$("#example").animateText([
		{
			offset: 0,
			duration: 1000,
			animation: "explode"
		}
	]);
});
</script>

続いてHTMLです。

<ul id="example">
	<li>sample text</li>
</ul>

これだけで動く…かと思ったら、なんかテキストがうまく表示されなかったです。なのでCSSでid「example」に以下を追加しました。

#example {
    overflow: visible !important;
}

これで無事テキストが表示されてうまく動くようになりました。

ということで、テキストにアニメーションをつけたい場合には一つの手段として覚えておくとよさそうですね。オプションも色々あるので詳しくは公式サイトでご確認ください。

以下からダウンロードできます。

関連記事

  1. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  2. jQuery Navobile
  3. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  4. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  5. jQuery.fontFlex

コメント

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP