Click highlighter with CSS transitions

by mrmartineau

CSS

#lookatmeiamhere {
      background: rgba( 255, 255, 10, 0.7 );
      width:100px;
      height: 100px;
      position: absolute;
      border-radius: 100px;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
       -webkit-transform: scale( 0,0 );
          -moz-transform: scale( 0,0 );
           -ms-transform: scale( 0,0 );
            -o-transform: scale( 0,0 );
               transform: scale( 0,0 );
  }
  .down #lookatmeiamhere {
    -webkit-transform: scale( 1, 1 );
       -moz-transform: scale( 1, 1 );
        -ms-transform: scale( 1, 1 );
         -o-transform: scale( 1, 1 );
            transform: scale( 1, 1 );
  }

JavaScript

var plot = document.createElement('div'),
    pressed = false;
plot.id = 'lookatmeiamhere';
document.body.appendChild(plot);
var offset = plot.offsetWidth / 2;
document.addEventListener( 'mousedown', function(ev) {
  document.body.classList.add('down');
  pressed = true;
  moveplot( ev.pageX, ev.pageY );
}, false );
document.addEventListener( 'mouseup', function(ev) {
  document.body.classList.remove('down');
  pressed = false;
},  false );
function moveplot( x, y ) {
  plot.style.left = x - offset + 'px';
  plot.style.top = y - offset + 'px';
}
document.addEventListener( 'mousemove', function(ev) {
  if (pressed) { moveplot( ev.pageX, ev.pageY ); }
}, false );