Kevin Powell - Community•16mo ago

How to replicate effect?

Hello, I came across this cool effect where hovering around grid changes grid line colors based on mouse position. I'm assuming there is a color burst following mouse position with some kind of overlay filter. Does anyone know or have a demo to an effect similar to this? --> https://gyazo.com/d0ea7d3a47c7ad8478ca0e2c7873eac8

Gyazo

Gyazo Screen Video

18 Replies

Wolle•16mo ago

One idea is, that you have a grid with gaps, the elements have a backgound-color and a blob moving behind the grid, following the mouse.

MattOP•16mo ago

Interesting. So the lines would essentially be transparent and blob underlaying to fill in color

MattOP•16mo ago

https://gyazo.com/eec608f3c86659676fe7843bc2ddaa6c

Gyazo

Gyazo Screen Video

MattOP•16mo ago

Thanks, was a lot more simplier than expected 👍

Choo♚𝕂𝕚𝕟𝕘•16mo ago

https://codepen.io/chooking/pen/RwEogoe

ChooKing

CodePen

Grid Flashlight

...

MattOP•16mo ago

For my example, I copied the JS from codepen (for mouse movement tracking) Do you mind explaining your JS for me? Our's are similar in the sense that they use variable top/left positioning

const burst = document.querySelector(".burst"); 
 
 document.addEventListener("mousemove", (event) => {
    const {pageX, pageY} = event;
    burst.style.setProperty("--x", pageX);
    burst.style.setProperty("--y", pageY);
 });

const burst = document.querySelector(".burst"); 
 
 document.addEventListener("mousemove", (event) => {
    const {pageX, pageY} = event;
    burst.style.setProperty("--x", pageX);
    burst.style.setProperty("--y", pageY);
 });

.burst {
    position:fixed;
    left:calc(var(--x) * 1px);
    top:calc(var(--y) * 1px);
    width:500px;
    height:500px;
    border-radius:50%;
    background: url(img/burst.png);
    background-size: contain;
    /* Center on mousepointer: */
    transform:translate(-50%, -50%); 
    z-index: 1;
}

.burst {
    position:fixed;
    left:calc(var(--x) * 1px);
    top:calc(var(--y) * 1px);
    width:500px;
    height:500px;
    border-radius:50%;
    background: url(img/burst.png);
    background-size: contain;
    /* Center on mousepointer: */
    transform:translate(-50%, -50%); 
    z-index: 1;
}

Choo♚𝕂𝕚𝕟𝕘•16mo ago

I used CSS variables for controlling the position of the flashlight, so the JS sets those variables. Your code is very similar. If you understand your code, what part do you not understand in mine?

MattOP•16mo ago

I didn't write this code, I took it from a public code pen 😅

Choo♚𝕂𝕚𝕟𝕘•16mo ago

The main difference I see is your code uses pageX and pageY. Mine uses clientX and clientY, which don't make a difference in this case because my event listener is on the document. If it was on another element, the coordinates would be relative to the element.

MattOP•16mo ago

I guess my main question would be, in my example, why is the left/top position multiplied by 1px? And, I'm assuming mousemove event listener returns X/Y of mouse (which is then stored into separate variables from event)?

Choo♚𝕂𝕚𝕟𝕘•16mo ago

My version does a string concatenation of the coordinate number with "px". The multiplication by 1px accomplishes the same thing.

MattOP•16mo ago

Ah okay Thanks Sorry if this is annoying, but, how do these examples assume X and Y position? ie, how do the variables auto assign to X and Y? const {pageX, pageY} = event; I'm reading about the properties here. Is there a default order? https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event When the mouse moves, that data is returned to event. However, there are a lot of different event properties associated with this, which is where I'm getting confused.

Choo♚𝕂𝕚𝕟𝕘•16mo ago

I'm not sure what you are referring to when you say "autoassign". Maybe you are asking about object destructuring. The event is an object that has many properties. Two of those are pageX and pageY. The object destructuring creates new local variables called pageX and pageY that are equal to event.pageX and event.pageY.

MattOP•16mo ago

Ah that makes more sense so for whatever release, if I needed global coordinates for the mouse, I'd use screenX / screenY (or any of the other properties) I figured pageX and pageY where variables created and mousemove only returned X & Y. Thanks for the clarification

Choo♚𝕂𝕚𝕟𝕘•16mo ago

That is very rarely useful. You generally want to know the position relative to the page or an element. Getting the position relative to the display is not very useful. It very likely will cause bugs when the user moves the window to a different spot, unless that is what you are expecting.

MattOP•16mo ago

I was just using it as an example since there's a few other event properties associated with mousemove When you say object destructing, is that essentially breaking down specific properties which can be returned by an event?

Choo♚𝕂𝕚𝕟𝕘•16mo ago

I'm not sure what you implied by mentioning that it can be returned. Object destructuring creates new local variables from parts of an existing object. You can do whatever you want with those variables. Returning them is only one of many things that can be done. They are normal variables after that and can be used in any way that any other variable could be used. I'm not sure if I misread or you edited that. Object destructuring can be used on any object. It's not only for event objects.

MattOP•16mo ago

Okay that makes sense. Sorry for the confusion, I'm trying to learn more about javascript and the terminology 🙂 Thank you

Gaming

Programming

How to replicate effect?