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. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  2. jquery-base-slider
  3. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  4. Square Menu
  5. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  6. no-image

    JavaScript

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

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

コメント

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

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

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP