アニメーション1
Duke(Javaのマスコット)を動かしてみましょう。
<style> #duke { position: relative; left: 0px; } </style>
<script> let duke, x, timer; function move() { x += 10; duke.style.left = x + 'px'; if (x > 500) clearInterval(timer); } window.onload = function() { x = 0; duke = document.getElementById('duke'); timer = setInterval(move, 100); // 100msごとにmove()を呼ぶ } </script>
<img id="duke" src="duke.gif" alt="Duke">
必要なCSSは次のものです:
position: relative;
相対座標position: absolute;
絶対座標left: 距離;
左からの距離right: 距離;
右からの距離top: 距離;
上からの距離bottom: 距離;
下からの距離
必要なJavaScriptの関数は次のものです:
setInterval(関数, 時間間隔);
時間間隔(単位:ミリ秒)ごとに関数を実行
解除する必要があるときは次のように setInterval()
の戻り値を保存しておきます。
timer = setInterval(関数, 時間間隔);
時間間隔(単位:ミリ秒)ごとに関数を実行clearInterval(timer);
上の設定を解除