JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<gallery>
    <position>test</position>
    <img src="http://placekitten.com/200/299"></img>
</gallery>

CSS

gallery {
    border-style:inset;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}
html, body {
    width:98%;
    height:98%;
}
gallery>img {
    width:auto;
    height:auto;
    transition:linear 50ms;
}
gallery>position {
    z-index:10;
    overflow:auto;
}

JavaScript

var x = 0,
    y = 0,
    mouse = [0, 0],
    v = [0, 0],
    positiontag = document.getElementsByTagName('position')[0];
document.onmousemove = function (e) {
    mouse[0] = e.pageX;
    mouse[1] = e.pageY;
};
[].map.call(document.querySelectorAll('gallery > img'), function (e) {
    console.log((parseInt(window.getComputedStyle(e).getPropertyValue('width')) / 2));
    e.style['margin'] = '-' + (parseInt(window.getComputedStyle(e).getPropertyValue('height')) / 2) + 'px -' + (parseInt(window.getComputedStyle(e).getPropertyValue('width')) / 2) + 'px';

         requestAnimationFrame(function () {
requestAnimationFrame(arguments.callee);
        var dx = mouse[0] - x,
            dy = mouse[1] - y,
            dd = Math.atan2(dy,dx);
        dx = Math.cos(dd);
        dy = Math.sin(dd);
        v[0] += (dx ? dx : 0);
        v[1] += (dy ? dy : 0);
        x += v[0];
        y += v[1];
             e.style['-webkit-transform'] = 'translate(' + x + 'px,' + y + 'px)';});

/*
function displayer(what, whatwith) {
    var a = Object.getOwnPropertyNames(what);
    return a.map(function (p) {
        return whatwith(p, a[p]);
    });
}

function table = function () {
    var frag = document.createDocumentFragment();
    var t = document.createElement('table');
    return function (a) {
        for (var i = 0;i<a.length;i++){
               
        }
        var r = document.createElement('tr');
    }
}*/