JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sprite</title>
<style>
body { margin: 0; padding: 0; height: 100%; background-color: #000; }
#spriteRoot { margin: 0; padding: 0; width: 100%; height: 1000px; }
</style>
</head>
<body>
<div id="spriteRoot"></div>
</body>
</html>
JavaScript
(function() {
// ------------------------------------------------------------
// Utilities
// ------------------------------------------------------------s
window.prefix = function(obj, prop, value)
{
var vendors = ["Webkit"];
obj.style[prop] = value;
prop = prop[0].toUpperCase() + prop.substr(1);
for (var i = vendors.length - 1; i >= 0; i--)
{
obj.style[vendors[i] + prop] = value;
};
}
window.mouseX = 0;
window.mouseY = 0;
window.addEventListener("mousemove", function(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
window.mouseX = e.pageX;
window.mouseY = e.pageY;
}
else if (e.clientX || e.clientY)
{
window.mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
window.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
});
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
// TODO: Tie-in with prefix.
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
...