But that also means we will have more cells, which can lead to performance issues. The larger it is, the more accurate our custom property values will be. We’ll do the same with -positionY: the value will be lower as the cursor moves to the top, and higher when it moves to the bottom.Ī few words about the grid size we’re using: We can actually make the grid whatever size we want. So, when the mouse cursor moves to the right side of the screen, the value of the -positionX will be higher and when it moves to left, it gets lower. The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We’ll see some of these bonus demos at the end of the article. For example, we could use them to set the top / left properties of an absolute positioned element, control a transform property, set the background-position, manipulate colors, or even set the content of a pseudo-element. Once we have mapped the custom properties for mouse position, we can use them to do pretty much anything we want. square element’s width and height accordingly. we will use the mouse position to set the value of these properties, and then use them set the.
We’ve also added the two custom-properties to the content. This will host the content of our project, and the elements we want to control using the mouse position – in this case, the. content class of that is spread to the width and height of the body. Heads up that we’re only using SCSS here for brevity, but all of this can be done in pure CSS.
0 kommentar(er)
