[next] [prev] [prev-tail] [tail] [up]

2 Click on button, box slides, using requestAnimationFrame

Clicking on HTML runs the code. The source code is 

<!DOCTYPE html> 
<html> 
<!-- simple animation of box moving. Nasser M. Abbasi, January 15, 2020 --> 
<body> 
 
<p> 
<button onclick="process()">Click Me</button> 
</p> 
 
<div style="width: 400px; height: 50px; position: relative; background-color:lightblue;"> 
    <div id ="myAnimation", style="width: 50px; height: 50px; position: absolute; background-color: red;"></div> 
</div> 
 
 
<p>current position: <span id="position_text"></span></p> 
<p>current time: <span id="time_text"></span> (seconds) </p> 
 
 
<script> 
"use strict"; 
var g_is_running = false; 
var g_starting_time =0; 
var g_element = document.getElementById("myAnimation"); 
var g_max = 400-50; 
var g_id; 
 
function process() 
{ 
  g_is_running=false; 
  g_id = window.requestAnimationFrame(do_it); 
} 
 
function do_it(time_stamp) 
{ 
  var progress     = 0; 
  var new_position = 0; 
 
  if (!g_is_running) 
  { 
     g_is_running = true; 
     g_starting_time = time_stamp; 
  } 
  else 
  { 
     progress = time_stamp - g_starting_time; 
     new_position = Math.min(progress / 20, g_max); 
  } 
 
  g_element.style.left = new_position + 'px'; 
 
  document.getElementById("position_text").innerHTML = new_position.toFixed(2); 
  document.getElementById("time_text").innerHTML = ((time_stamp-g_starting_time)/1000).toFixed(2); 
 
  if (new_position < g_max) 
  { 
     window.requestAnimationFrame(do_it); 
  } 
} 
 
</script > 
 
</html>

[next] [prev] [prev-tail] [front] [up]