Mousemove / screen tilt --> change opacity


(Martin C.) #1

Hi there,
I would like to control the opacity of an image through the position of the mouse (for desktop), or the tilt of the screen (for an Ipad)
For example: if the mouse is completely at the left, opacity of the image would be 100% - - completely at the right, opacity 0%;
and for Ipad: tilted at left --> opacity 100% / right–> 0%
I found this script for desktop on fiddle but I didn’t succeed applying it on Hype…: http://jsfiddle.net/WV8jX/161/
Could you help me for that ?
Thank you very much!


Device orientation --> Change element position
#2

Run this on scene load

var image = hypeDocument.getElementById('image'); // CHANGE ID IF NEEDED
	
var opacity = hypeDocument.getElementProperty(image, 'opacity')
	
document.addEventListener('mousemove', changeOpacity, false);
	
function changeOpacity(e){
		
	var width = window.innerWidth;
	var value = e.pageX / width;
		
	hypeDocument.setElementProperty(image, 'opacity', opacity - value)
		
}

Substitute the code with your own ID for your element.

Hype has it’s own API to connect to “opacity” so you can use that.

EDIT*

The following allows for iPad "deviceorientation’ also. This is the same code with the addition.
Also, you must set the elements initial opacity to 50% (you can do this in Hype)

var image = hypeDocument.getElementById('image');

var opacity = hypeDocument.getElementProperty(image, 'opacity')

if( /iPad/i.test(navigator.userAgent) ) {
	window.addEventListener('deviceorientation', changeOpacityForiPad, false);
} else {
	document.addEventListener('mousemove', changeOpacityForDesktop, false);
}

function changeOpacityForDesktop(e){
	
	var width = window.innerWidth;
	var value = e.pageX / width;
	
	hypeDocument.setElementProperty(image, 'opacity', opacity + 0.5 - value)
	
	console.log(opacity)
	
}

function changeOpacityForiPad(e){
	
	var width = window.outerWidth,
	rot = (e.gamma / 360) * 10;
	hypeDocument.setElementProperty(image, 'opacity', opacity - rot);
	
}

(Martin C.) #4

Sorry hi asked a question about device orientation that I’ve deleted because I think I’ve found the answer already. To whom is interested in creating events based on device orientation, this could be a start: https://w3c.github.io/deviceorientation/spec-source-orientation.html


(Martin C.) #5

Hi there,
I wonder what function/property should I use to vary not the opacity, but the position of an element (x, y), depending on device position/mouse position…
Thank you