JSFiddle - React, Tailwind, and code Playground
HTML
<section></section>
<script>
var animCanvas = document.createElement('canvas'),
animContext = animCanvas.getContext('2d'),
container = document.querySelector('section'),
canvasWidth = 800,
canvasHeight = 136,
imageWidth = 743,
imageHeight = 136,
imageOffsetX = 0,
imageOffsetY = 0,
imageMoveX = 0,
imageMoveY = 0;
var imageMoveXDelta = 0.1,
intervalMilliseconds = 100;
animCanvas.width = canvasWidth;
animCanvas.height = canvasHeight;
container.appendChild(animCanvas);
var canvasRightEdge = canvasWidth - imageWidth;
function moveImage(){
if (imageMoveX > canvasRightEdge) {
return;
}
animContext.clearRect(0, 0, canvasWidth, canvasHeight);
animContext.save();
animContext.translate(imageMoveX+=imageMoveXDelta, imageMoveY);
animContext.drawImage(imageObj, imageOffsetX, imageOffsetY);
animContext.restore();
requestAnimationFrame(moveImage, intervalMilliseconds);
}
// Provides a cross-browser requestAnimationFrame.
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, fps) {
window.setTimeout(callback, 1000 / 60); // frames per second
};
})();
}
var imageObj = new Image();
imageObj.onload = function(){
animContext.drawImage(imageObj, 0, 0);
window.addEventListener('load', moveImage, false);
};
imageObj.src =...
CSS
* {
margin:0;
padding:0;
}
section {
display:block;
}