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…:
Could you help me for that ?
Thank you very much!

Device orientation --> Change element position

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.


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)

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:

(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