Shake
このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。
サイトの一部分を目立たせたい場合、色を変えるよりも目立たせたいものを動かしたほうが効果的なこともあります。地震のように揺らしてみましょう。
ID属性で指定した要素を揺らすためのDynamicHTML(DOM+JavaScript)です。このページの説明では、スクリプトはscriptフォルダにあるものとして記述しています。
Sample
文字が揺れます。
<div id="shakes">文字が揺れます。</div>
ID名は固定ではありませんので何にしても自由ですが、BODY要素のonloadイベントなどの呼び出し側のスクリプトの実行時に必ず指定したID名と同じものを使用してください。
<SCRIPT type="text/javascript" src="script/shake.js"></SCRIPT>
ここからスクリプトをファイルに保存して、<HEAD>～</HEAD>内に上のように記述してスクリプトを読み込ませます。
<BODY onload="shake('shakes',10,20,50,2000);">
サンプルのスクリプトは<BODY>のonloadで実行しています。ほかの使い方としては、onmouseoverイベントでA要素の上にマウスが来たときにリンク部分を揺らすという演出も可能でしょう。
最初のパラメータが指定したID名で、2番目のパラメータが揺れの大きさ、3番目のパラメータが1回の処理で揺れる回数、4番目のパラメータが処理タイミング（ミリ秒）、5番目のパラメータが揺れ終わってからどれぐらいの間隔で再び揺らすかというものです。5番目のパラメータを0にすると、揺れは最初の1回だけとなります。