Mouse movement with CSS --vars in < 600 bytes

August 15th, 2018

Custom CSS variables can be used to create custom properties that can then be passed on to a property. This can be used for repeatable code and variabled which are subject to change as so:

:root {
  --fonts: 'Arial', sans-serif;
}

body {
  font-family: var(--fonts);
}

We created a variable, fonts which was referenced later on in the body element.

:root is a pseudo-class to select the root element of your document. (Probably <html>).

CSS variables are not declaring a static variable, but can be used to hold data that can be changed. I'm going to use this to create this mouse movement.
To start with the Javascript, we can use the mousemove event on my document to update the variable:

document.addEventListener('mousemove', function (e) {
  document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
  document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});

I added an EventListener on every mousemove event and updating the root element's CSS properties. Here is a breakdown:

  • document The HTML document
  • .documentElement The root element (<html>)
  • .style The HTMLElement.style property of <html>
  • .setProperty('--mouse-x', e.clientX + 'px'); set the property "--mouse-x" to the X mouse position.

In the CSS, I can reference these new properties like this:

/*with top/left*/
element {
 left: var(--mouse-x);
 top: var(--mouse-y);
 }
/*with transform*/
element {
  transform: translate(var(--mouse-x),var(--mouse-y)
}

See the Pen zLQvjp by Lucas Bersier (@berslucas) on CodePen.