テキストにウェーブアニメーションの効果を「textWave effect」
当ページのリンクには広告が含まれています。
スポンサーリンク
テキストにウェーブアニメーションの効果を実装するプラグイン「textWave effect」を紹介します。
jQueryプラグイン「textWave effect」
このプラグインを使えば、フォントサイズが移り変わるウェーブ効果付きのテキストが作成できます。ウェーブの大きさ（高さ）・速度・回数などオプションで簡単に指定できるので、びっくり効果をサイト上に実現できます。
スポンサーリンク
デモでは、h1タグのテキストにウェーブ効果をつけています。それではどうぞ。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textWave - jQueryプラグインまとめのカルマ</title>
<style>
h1 {
color: red;
font-size: 80px;
}
</style>
</head>
<body>
<h1 id="content"></h1>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.textWave.js"></script>
<script>
$(function(){
$('#content').textWave({
text:'textWaveのデモでーす'
});
});
</script>
</body>
</html>
jsファイルのダウンロードやその他オプションはこちらからどうぞ。
» textWave effect
スポンサーリンク