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. jQuery ui material design datepicker
  2. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  3. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  4. Blindify
  5. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  6. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP