LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
div::after {
  counter-reset: mouse-x var(--mouse-x) mouse-y var(--mouse-y);
  content: counter(mouse-x) "px, " counter(mouse-y) "px";
}
CSS
:root {
  --mouse-x: 200;
  --mouse-y: 200;
}

/* See: http://stackoverflow.com/q/40164169/4172644*/
div::after {
  counter-reset: mouse-x var(--mouse-x) 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;
}
div {
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px));
          transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px));
  width: 10em;
  height: 10em;
  background: #9ccf5e;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
      flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 2;
  border-radius: 100%;
  will-change: transform;
}
body {
  margin: 2em;
  font-family: sans-serif;
}
JS
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
  document.documentElement.style.setProperty('--mouse-y', e.clientY)
})
Host Instantly Drag and Drop Website Builder

 

Description

So cool! We can use CSS Variables (custom properties) and use JavaScript to pump event-related data to CSS without bogging down the DOM. Here I wanted to not only move an element based on mouse position, but also provide mouse coordinates as feedback to User.
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID