twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Wave In

Wave In

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

Visual Filterで波打って崩れている文字から、文字になっていくというアニメーション効果を出すためのDynamicHTML(DOM+JavaScript)です。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

タイトルにいいかも!?
<DIV id="wavein" style=" width:100%; height:45px; font-size:30px; font-weight:bold; filter:wave(add=0,phase=5,freq=3,strength=500,lightstrength=0);">タイトルにいいかも!?</DIV>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。

Visual Filterは、<DIV>内で指定してください。また、必ずstyle属性でwidth(横幅)を指定しなければなりません。position:absoluteを指定しておけば横幅を指定しなくても大丈夫です。

<SCRIPT type="text/javascript" src="script/waving.js"></SCRIPT>

ここからスクリプトをファイルに保存して、<HEAD>~</HEAD>内に記述してスクリプトを読み込ませます。

<BODY onload="waving('wavein',50);">

スクリプトは<BODY>のonload属性で実行します。処理対象のID名と処理間隔を指定します。なお、第3パラメータに繰り返し間隔を指定すると、文字が完成してから指定した繰り返し間隔で指定した時間が経つと再度バラバラの状態からアニメーションが開始されます。