Text follows the mouse

Using JavaScript with Hype
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