<div class="box">
<div class="title">60 fps:</div>
<div class="div green" id="div1"></div>
</div>
<div class="box">
<div class="title">30 fps:</div>
<div class="div red" id="div2"></div>
</div>
<div class="box">
<div class="title">10 fps:</div>
<div class="div blue" id="div3"></div>
</div>
body {
padding: 20px;
background: #f2f2f2;
}
.box{
width: 100%;
height: 200px;
position: relative;
}
.div {
width:100px;
height:100px;
line-height: 100px;
text-align: center;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
position: absolute;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
View Compiled
function moveDiv(div, fps) {
var left = 0;
var param = 1;
function loop () {
update();
draw();
}
function update() {
left += param * 2;
if (left > 300) {
left = 300;
param = -1;
} else if (left < 0) {
left = 0;
param = 1;
}
}
function draw() {
div.style.left = left + "px";
}
setInterval(loop, 1000 / fps);
}
moveDiv(document.getElementById("div1"), 60);
moveDiv(document.getElementById("div2"), 30);
moveDiv(document.getElementById("div3"), 10);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.