Can Cursor Follows text?

Ask the community
,
1

hi everyone!
i have a question

in a webpage, whenever you move mouse, cursor follows the text, in whatever image you are on.

do know how to do this? i tried to make it with hover effect but i couldnt.

i dont allow the post links.

2

You can do something like this:

In an htmlComponenet (iframe) or a custom element.

3

thank you. i will try asap :slight_smile:

so text will follow the cursor right?

4

If you adjust the code (use a

tag with text innerHTML instead of the circle)

5

Maybe you’ll find the following code easier to use:

<html> 
	<head> 
	<script> 
		function m(e){ 
			var bx = document.getElementById("text"); 
			bx.style.left = e.pageX; 
			bx.style.top = e.pageY; 
		} 
	</script> 
	</head> 
 
	<body onmousemove="m(event)"> 
		<div id="text" style="position:absolute;"> My Text </div>
	</body> 
</html>
6

Thanks a lot J.D! appreciate it!

will try asap

7

Hi again J.D. i couldnt make it work. maybe i put the code in a wrong place. can you please recommend me a video or a manual to make it right?

8

This code will not work if you put it in the Velo page Code section.
You can either add an embedded widget to the page (and put the code inside) or build a custom element (then you’ll have make some adjustments if you go for this option).

9

hi again J.D.

i made the code work and it works perfectly. thanks for that.

but now i have a problem like, when cursor follows the text, that makes the page (if something clickable like view more or start a video button) unclickable.

do you know how can i solve that problem?

10

Hi Okan,
The thing is that Velo does not support mousemove event listener, that’s why you had to use an html widget,
Now, since you put a (transparent) widget layer, the elements underneath won’t fire.

There’re 3 things (actually some more) you can do, but all of them require some non-Velo coding and and are not for beginners (you’ll have to make your own research or hire an expert as it’s beyond this forum scope, and will take some time to develop ), but I’ll write the general concepts anyway:

Option 1: put the background elements inside the widget (using html, css + event listeners and use this API to communicate with the Velo page).

Option 2:
Instead of an iframe widget, use Custom Element , make the custom element width fits to the text (and not wider) and set the text to be a few pixels left so the cursor will never be really over this layer.

Option 3:
Instead of the text create an image with the text. Make a custom element, set it to : pointer-events: none; and for the cursor background style (use the image.

11

Thank you very much! will try to do that! :slight_smile: