css variables mouse

Seguimiento del ratón en tiempo real CSS variable

by jpeter06

HTML

<div>
  <p id="p4"></p>
</div>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

CSS

:root {
  --mouse2-x: 300;
  --mouse-x: 100;
  --mouse-y: 100;
}

/* See: http://stackoverflow.com/q/40164169/4172644*/
div::after {
  counter-set: mouse-x var(--mouse-x)  mouse-y var(--mouse-y);
  /*counter-set: mouse-x 22 mouse-y var(--mouse-y);*/
  content: counter(mouse-x) "px, " counter(mouse-y) "px";
}



/* setup and presentation styles */
div::before {
  content: 'mouse position';
  font-weight: bold;
}

p {
  position: absolute;z-index:-1;
  top: 0;
  left: 0;
  display:block;
    width: 3em;
  height: 3em;
  background: rgba(255,0,0,0.5);
  color:white;
    will-change: transform;
    border-radius: 100%;
}

div {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(calc( calc(var(--mouse-x) * 1px) - 50%), calc(calc(var(--mouse-y) * 1px) - 50%));
  width: 10em;
  height: 10em;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  line-height: 2;
  border-radius: 100%;
  will-change: transform;
}

#p1{ transform: translate(calc(var(--mouse-x) * 2 * 1px), calc(var(--mouse-y) * 2 * 1px));}
#p2{ transform: translate(calc(var(--mouse-x) * 1 * 1px), calc(var(--mouse-y) * 2 * 1px));}
#p3{ transform: translate(calc(var(--mouse-x) * 2 * 1px), calc(var(--mouse-y) * 1 * 1px));}
#p4{  background:#777;
      transform-origin: 150% 150%;
      transform: rotateZ(calc((var(--mouse-y) + var(--mouse-x)) * 3 * 1deg))
   }


body ,html{
  margin: 0px; padding:0px; overflow:hidden;
  font-family: sans-serif;
}

JavaScript

//Partiendo de http://codepen.io/jasesmith/pen/dpwjra/
//funciona en Chrome
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
})