Structure
In red dotted : our dedicated area.
In green solid : the target element.
(If multiple elements are targeted, the behavior is applied to the first one. So put multiple elements in ONE dedicated parent).Apply a dedicated behavior type
We want to apply a stick effect on child when hovering the dark area.
So we add the classcursor-stick-areato the dark parent of the targeted element (the light one).
Now if you move your mouse in the dark area, the cursor will stick on light area.
Add effect on cursor when hovering element
Now we want to add a large effect on the cursor when hovering the targeted element.
So we adddata-cursor='-large'attribute to the targeted element.
Now if you move your mouse in the dark area, the cursor will stick on light area and will have a large effect.
You can also add-exclusionto the attribute to add a exclusion blending effect. (To add it, separate the values with a comma and WHITHOUT a space).Add a Magnetic effect to target
Now we want to add a magnetic effect to the targeted element.
So we add the classcursor-magnetic-areato the targeted element.
Then we write a loop to target each wanted element :
document.querySelectorAll('.cursor-magnetic-area').forEach(el => {
const magnetic = new Magnetic(el)
})Now if you move your mouse in the dark area, the cursor will have a magnetic effect and will follow the mouse.
(Don't forget to checkthe library source codeto see how it works deeper).