Apps and tools to do more with

Here’s a CSS variable (formally called a “CSS custom property“):

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

Perhaps you use them to set a position:

.mover {
  left: var(--mouse-x);
  top: var(--mouse-y);
}

To update those values from JavaScript, you’d:

let root = document.documentElement;

root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "px");
});

That’s all.

Comments

1. Edson

   Permalink to comment# September 24, 2018

   I’d add * { cursor: none; } for demo purpose.

2. Arnaud

   Permalink to comment# September 25, 2018

   Is it more powerful than setting directly the top and left style of an element ?

   • Anders Grimsrud

     Permalink to comment# October 1, 2018

     I see at least two advantages. One is the CSS readability: If you want to pin an element to the position of your cursor, left: var(--mouse-x) just makes total sense to me. And if there are more than one element reacting to the movement of your mouse, you don’t have to update them one by one in your JS – you simply update the CSS variable once. Mixed with a few other CSS techniques this pretty much opens up for a whole lot of new opportunities. I just played around with this to make some custom scrollbars and I’m sure there are plenty of other use cases! :-)

   • Arnaud`

     Permalink to comment# October 1, 2018

     Yeas, I already use these powers evry day actually ! So great… until your client asks for IE compatibility. Anyway, I just decided to drop all IE projects, because I really like CSS variables really much !
     My question was more about performance : is it more performant to set a CSS variable than setting the top and left styles directly ?

Moving Backgrounds With Mouse Position

Let's say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: And you toss a background on it: .module { background-image: url(big-image.jpg); } You can adjust the background-position in JavaScript like this:…

October 4, 2018

Moving Highlight

I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration…

January 9, 2011

Playing With Particles Using the Web Animations API

When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can. In this post, we'll make even more particle magic using the Web…

March 18, 2020

The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.