今日の人気記事

まだデータがありません。

テキストにウェーブアニメーションの効果を「textWave effect」

当ページのリンクには広告が含まれています。

スポンサーリンク

テキストにウェーブアニメーションの効果を実装するプラグイン「textWave effect」を紹介します。

jQueryプラグイン「textWave effect」

このプラグインを使えば、フォントサイズが移り変わるウェーブ効果付きのテキストが作成できます。ウェーブの大きさ(高さ)・速度・回数などオプションで簡単に指定できるので、びっくり効果をサイト上に実現できます。

スポンサーリンク

デモでは、h1タグのテキストにウェーブ効果をつけています。それではどうぞ。

「textWave effect」のデモ

デモのソース(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

スポンサーリンク

関連記事(一部広告含む)