Divide div in half and have cursor flip when cursor crosses div

[maxvia]

Hi, 

 

I would like to create a similar effect as the one here: https://cultivatingthevanguard.com/ (1st carousel) where you have the cursor flipping to the left when crossing to the left if the cursor is on the left part of the image and right when on the right part of the image. 

 

I have can have access to my div coordinates using the getBoundingClientRec() fonction, using calculation and mouseposition I could figure out if im on the left side or right side of the image however I am not sure how I could initiate a flip when crossing the div? 

 

Any help is appreciated. 

 

Thank you!

[akapowl]

Hey @maxvia - welcome to the forums.

 

From what I can tell, when inspecting things through dev-tools, they are simply just using 'invisible' divs with mouseenter functions attached for this.

 

Something like this. You'd have to apply the rotation-tween to your custom cursor instead of what I did there, of course.

 

See the Pen f99a39dfb3697c0e1365c0c824e71672 by akapowl (@akapowl) on CodePen

 

 

If you need information on how to setup a custom cursor in the first place, there are several threads on that in the forums already.

 

I'll link you to this one, might be helpful.

 

 

 

Hope this helps.

Cheers.

 

 

 

 

[maxvia]

Hey @akapowl, thank you very much for your detailed answer and examples.

 

Works like a charm

 

Cheers!