Skip to content

Instantly share code, notes, and snippets.

@ttcremers
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ttcremers/6ea2a01c67e68ac69215 to your computer and use it in GitHub Desktop.
Save ttcremers/6ea2a01c67e68ac69215 to your computer and use it in GitHub Desktop.
// rAF
window.requestAnimationFrame = function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(f) {
window.setTimeout(f,1e3/60);
}
}();
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var W = canvas.width;
var H = canvas.height;
// We want to move/slide/scroll the background
// Velocity X
var vx = 0;
var img = new Image();
img.src = 'http://blah.com/some_image.png';
(function renderSlider() {
window.requestAnimationFrame(renderSlider);
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, 500, 400);
ctx.drawImage(img, vx, 50);
ctx.drawImage(img, img.width-Math.abs(vx), 50);
if (Math.abs(vx) > img.width) {
vx = 0;
}
vx -= 2;
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment