SitePoint - Hardware Acceleration

by tabalinas

HTML

<div id="background" class="background">
    <div id="handle" class="handle"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, 
body {
    height: 100%;
}

.background {
    background-image: url('http://s.radar.oreilly.com/wp-files/2/2012/07/sitepoint-logo-new-1024x723.png');
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    -webkit-filter: blur(1px) saturate(120%) brightness(140%);
    filter: blur(1px) saturate(120%) brightness(140%);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.handle {
    position: absolute;
    width: 30px;
    height: 30px;   
    left: 0;
    top: 0;
    background: steelblue;
    border: 1px solid lightgray;
    border-radius: 50%;
    box-shadow: 0 3px 3px -1px rgba(0,0,0,.2);
    transition: left .5s, top .5s;
}

JavaScript

var background = document.getElementById("background");
var handle = document.getElementById("handle");

background.addEventListener("mousemove", function(e) {
    handle.style.left = e.pageX + "px";
    handle.style.top = e.pageY + "px";
});