Polling Mouse Movement

Polling mouse movement

by James Doyle

JavaScript

function updatePerpective(value) {
    document.getElementById('container').style.webkitPerspective = value;
    document.getElementById('perspective-value').innerText = value;
}

function setPerspectiveOrigin(event) {
    var container = document.getElementById('container');

    var offsetX = event.pageX - container.offsetLeft;
    var offsetY = event.pageY - container.offsetTop;

    var originStyle = (100 * offsetX / container.offsetWidth) + '% ' + (100 * offsetY / container.offsetHeight) + '%';
    container.style.webkitPerspectiveOrigin = originStyle;
}

window.addEventListener('load', function() {
    var container = document.getElementById('container');
    container.addEventListener('mousemove', setPerspectiveOrigin, false);
    container.addEventListener('mouseout', function() {
        container.style.webkitPerspectiveOrigin = '50% 50%';
    }, false);
    updatePerpective(500)
}, false);