Text follows the mouse


(johanna Huss) #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 !


Help please: movable clip-path
(David Guillermo Escalante Trinidad) #2

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


#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.


(Jonathan Deutsch) #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!


(Marian) #5

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


(Jonathan Deutsch) #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: