![]() y: the value of the top will be the distance of the outer border of the Box element relative to the inner border of the top of the offsetParent, the closest positioned ancestor element.Then subtract this left value from the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. x: the value of left will be the number of pixels the upper left corner of the Box element is offset to the left.gradientSize: the size of the Highlight.originalColor: the original background color, in this case black.OnMouseMove: when you move the mouse inside the Box, it will call a function. I've also included TypeScript in it.Ĭonst = useState ( 'rgb(0, 0, 0)' ) const = useState ( 0 ) const = useState ( 0 ) Let's get started!Īs a first step, I created a new React application. Which we will achieve by changing the background of the Box itself. And display the highlighting around the cursor. So need to be able to determine the exact position of the cursor. Now let's see how I made the implementation this component! The project repo can be found on GitHub, in the links at the end of this article.īut what exactly are we talking about? Here's a screenshot from the JetBrains site, the link is also at the end of the article.įirst, a summary of how the magic works: is actually a function that continuously follows the movement of the mouse inside the box. I created it in React, because that is the framework I like the most. ![]() As a Frontend Developer, I immediately had the idea to create this trick myself. ![]() This effect follows the movement of the mouse inside a box and a highlight appears around the cursor. Once when I was on the JetBrains site, I noticed a hover effect that caught my eye. ![]()
0 Comments
Leave a Reply. |