Stop mousemove on mouseout

Using JavaScript with Hype
1

Hey folks,

i found this nice tilt-effect.

I want to load this event on mouseOver and unload and reset this on mouseOut.

So, i'm struggling to figure that out, as you might have already assumed, because you are reading this :slight_smile:

So, this is my naiv approach:

	
	//Max-leftposition of draggable
	var max = parseInt(hypeDocument.getElementById('containerLeft').style.width);
	
	//timeduration of targettimeline
	var duration = hypeDocument.durationForTimelineNamed('test');
	

	
	
	$( ".HYPE_scene" ).mousemove("mousemove", function( event ) {
	
		eventLeft = event.pageX;
		
		containerLeft = hypeDocument.getElementById('containerLeft').getBoundingClientRect().left;
		
		relLeft = eventLeft - containerLeft;
		
		destTime = (relLeft/max)*duration;
		
		midTime = duration/2;

		hypeDocument.goToTimeInTimelineNamed(destTime, 'test');
		
	});
	
 	
	$( ".HYPE_scene" ).mouseout("mouseout" , function stop(e) {
		midTime = duration/2;
		hypeDocument.goToTimeInTimelineNamed(midTime, 'test');
		hypeDocument.pauseTimelineNamed('test');
	});

mousemove.zip (116,6 KB)

Thank you guys in advance!

2

First note that when you call the jquery .mousemove() function or .mouseout() function, that is installing handlers on the specified element. So I don't think you really need to install them when the mouse over starts/stops. You can do that in the On Scene Load.

In my example, I moved the installation of the mousemove handler there, and I also have it performed on your "rect" element (which I gave a unique element id of myrect) since that seemed like maybe it was more of what you were going for than installing it on every hype scene.

As for the mouse out handler, I just removed that since you already have a function in the hype mouse out handler you called MouseMoveStop(). In this function, you don't need to do the jquery installation, instead you can just call your code directly.

Please see this version:
mousemove-maybefixed.hype.zip (117.0 KB)

I'm not sure it is entirely the behavior you want, but perhaps the explanation helps get you there!

1 Like