テキストに滑らかに動くかっこいいアニメーションをつけることができる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;
}
これで無事テキストが表示されてうまく動くようになりました。
ということで、テキストにアニメーションをつけたい場合には一つの手段として覚えておくとよさそうですね。オプションも色々あるので詳しくは公式サイトでご確認ください。
以下からダウンロードできます。
