Quake
Description:
地震が起きたかのように画面を揺らします。
このスクリプトはスクロールバーが出ているページのみ有効です。
Demo:
Source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function quake(pos, dir, count) {
if(!count) count = 0;
var times = 15; //揺らす回数。
var width = 20; //最大揺れ幅。
var step = 10; //揺れ幅。
var speed = 10; //揺れの速度。
pos = dir ? pos-step : pos+step;
window.scroll(0, pos);
if(pos <= 0) {
dir = false;
count++;
if(count > times) {
return;
}
}
else if(pos >= width) {
dir = true;
}
setTimeout("quake(" +pos+ "," +dir+ "," +count+ ")", speed);
}
//-->
</script>
</head>
<body>
<form mathod="post">
<input type=button onClick="quake(0,false)" value="揺らす"> (ボタンに反応)
</form>
<a href="JavaScript:quake(0,false)">揺らす</a> (リンクに反応)
<!-- プレビュー用 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Advice:
Arrangement:
ロードと同時に揺らす
ページの読み込み(ロード)が終わると同時に揺らすようにします。
onload="quake(0,false);"
Browser:
Internet Explorer4.0以上
Netscape Navigator3.0以上