JSFiddle - React, Tailwind, and code Playground
HTML
<img style="zoom: 2.3; left: 41px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="zoom: 2.3; left: 40px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="zoom: 2.3; left: 31px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="zoom: 2.3; left: 32px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="left: 91px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="left: 94px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<button id="button-click-me">Click me</button>
CSS
img { position: absolute; }
body { background-color: #000; }
JavaScript
function budgeRight() {
var imgs = document.querySelectorAll('img');
imgs = Array.prototype.slice.apply(imgs);
imgs.forEach(function(img) {
var left = parseInt(img.style.left);
img.style.left = (left + 1).toString() + "px";
});
}
var interval = null;
var button = document.getElementById('button-click-me');
button.addEventListener('click', function() {
if (interval) {
clearInterval(interval);
interval = null;
}
else {
interval = setInterval(budgeRight, 500);
}
});