<h1>JavaScript animation with setInterval()</h1>
<p>
<label>Choose de "frame rate" from the list:</label>
<select id="frameRate">
<option value="5">5 fps</option>
<option value="15">15 fps</option>
<option value="24" selected>24 fps</option>
<option value="40">40 fps</option>
<option value="60">60 fps</option>
</select>
</p>
<p>
<label>Choose the distance covered in every frame:</label>
<select id="distance">
<option value="1">1px</option>
<option value="5" selected>5px</option>
<option value="10">10px</option>
<option value="25">25px</option>
<option value="50">50px</option>
</select>
</p>
<div id="box"></div>
#box {
width: 50px;
height: 50px;
border: 1px solid #000;
background-color: darkorange;
}
var box = document.querySelector("#box");
var frameRate = document.querySelector("#frameRate");
var distance = document.querySelector("#distance");
var int;
function animate() {
var margin = 0;
int = setInterval(function() {
margin = (margin > window.innerWidth ? 0 : margin + Number(distance.value));
box.style.marginLeft = margin + "px";
},
1000 / Number(frameRate.value))
}
animate();
function reset() {
clearInterval(int);
animate();
}
frameRate.addEventListener("change", reset);
distance.addEvenetListener("change", reset);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.