CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
JavaScript// setup
var rAF = window.requestAnimationFrame;
var startBtn = document.querySelector('.animate');
var stopBtn = document.querySelector('.stop');
// state
var running = false;
// add listeners
// start
startBtn.addEventListener('click', function(e) {
running = true; rAF(update); });
// stop
stopBtn.addEventListener('click', function(e) {
running = false;
});
// Set the heights for all these
// movers in simple CSS style.top
var movers = document.querySelectorAll('.mover');
(function init() {
for (var m = 0; m < movers.length; m++) {
movers[m].style.top = (m * 20 + 50) + 'px';
}
})();
// animation loop
function update(timestamp) {
for (var m = 0; m < movers.length; m++) {
movers[m].style.left = ((Math.sin(movers[m].offsetTop +
timestamp / 1000) + 1) * 500) + 'px';
}
if (running){
rAF(update);
}
};
rAF(update);