Text follows the mouse

Using JavaScript with Hype
1

Hello Im trying to add a text following my cursor and everytime I go over my portfolio picture.
Exactly like this. http://sagmeisterwalsh.com/work/
Does anyone know how to do it

Thank you so much !

1 Like
2

Yeah, this is a badass idea, it would be nice if could be possible.

1 Like
3

These are usually referred to as ‘tooltips’ and there are a lot of examples online you can incorporate into Hype: http://www.menucool.com/tooltip/css-tooltip is one.

2 Likes
4

Here’s a basic Hype solution:

  1. Add your image background and text
  2. Give the text a class name of moveableText
  3. Group the image and text
  4. On the group, add an On Mouse Over action that Runs Javascript with this function:

	// make sure the text is clipped so it isn't outside boundaries of group
	element.style["overflow"] = "hidden";

	// set the element to visible
	var movableTextElements = element.getElementsByClassName("movableText");
	for(var i = 0; i < movableTextElements.length; i++) {
		var textElement = movableTextElements[i];
		hypeDocument.setElementProperty(textElement, 'opacity', 1.0);
		textElement.style["display"] = "block";
		
		// make sure the text element movement won't interfere with on move positions
		textElement.style["pointer-events"] = "none";
		textElement.style["pointerEvents"] = "none";
	}
	
	// add a hook for on mouse move
	if(element.onmousemove == null) {
		element.onmousemove = (function (evt) {
			var movableTextElements = element.getElementsByClassName("movableText");
			for(var i = 0; i < movableTextElements.length; i++) {
				hypeDocument.setElementProperty(textElement, 'left', evt.offsetX);
				hypeDocument.setElementProperty(textElement, 'top', evt.offsetY);
			}
		});
	}
	
	// trigger position change for the initial mouse over
	element.onmousemove(event);
  1. Then make an On Mouse Out action for the group that runs this javascript code:
var movableTextElements = element.getElementsByClassName("movableText");
for(var i = 0; i < movableTextElements.length; i++) {
    var textElement = movableTextElements[i];
    hypeDocument.setElementProperty(textElement, 'opacity', 0.0);
}

You can see it in action here:
http://tumult.com/support/examples/f8316-MovableText/MovableText.html

And this is the sample document:
MovableText.hype.zip (1.2 MB)

As for some of the fancier behavior like centering on the text or sticking to the edges, that’s a javascript exercise left up to the reader.

Enjoy!

9 Likes
5

I think this would be great to see this on a touch screen mobile device. Is that possible?
Thanks so much!
Marian

6

Well, this is for hovering, which as a concept doesn’t exist on mobile. If you want it to be when the finger is down I suspect you could convert this pretty easily to also use the touchmove event; this can also be done in Hype simply with the On Drag event and have it Control Element Position.

7

There's also this flashlight version from a previous thread:

1 Like