Parallax Tilt Effect

Physics
1

Hi All,

I’m wanting to recreate the tild motion effect that iOS devices have currently.

I’m sure it could be done using the right set of settings within the physics elements of Hype.

Here is a not very good video of the effect from YouTube:

My mind is telling me to mask the image that you want to tilt and apply physics to the image within the mask?

Any advice onhow to do this would be greatly appreciated!

2

Found a bit more info here on how to do it (but not using Hype).

Maybe It’ll help!

Thanks :slight_smile:

1 Like
3

ive got an example of this in the gallery section


http://tumult.com/hype/gallery/Henrys/Henrys.hype.zip

It’s not easy to do this, you have to set it up with code and then have hype functions as call backs , https://www.html5rocks.com/en/tutorials/device/orientation/ was where i learned how to get the input data. Keep in mind i learned that android treats one of the orientations as a reverse to ios so you need to make an android condition in the device orientation rules.

1 setup a listener for orientation
2 pass a callback function with (alpha,betta,gamma) as the passing vars
3 execute your hype functions based off those 3 variables.
And optionally do a condition for android.
MIne was

FlipValue = 1;                 
 if( /Android/i.test(navigator.userAgent) ) {
        rawBetaData = FlipValue*Math.floor(current_orientation.gamma);
}else {
       rawBetaData = -FlipValue*Math.floor(current_orientation.beta);
 }
1 Like
4

As Lucky has suggested you need to use Event Listeners to to listen for the orientation event.

When this listener is called it returns alpha, gamma and beta in the event object. We can use those to set an element’s property in Hype using the Hype API. This element will be used as a background. (You could also do this with any DOM element)

Here is some code. I have made it as simple as possible and commented so you can understand (hopefully) what’s going on.

var done = false;

// create helper function and give element as parameter
moveObject = function (ele) {

	var startGamma, startBeta;
	var obj = {};
	
	// capture the element's starting position
	obj.left = hypeDocument.getElementProperty(ele, 'left')
	obj.top = hypeDocument.getElementProperty(ele, 'top')
	
	// check if device supports DeviceOrientation and add Listener
	if(window.DeviceOrientationEvent){
	
		window.addEventListener("deviceorientation", orientation, false);
	  
	} else {
		
		// log if device does not support
		console.log("DeviceOrientationEvent is not supported");
	} 
	
	function orientation(ev){
	  
	  	// get the initial Gamma and Beta values so we can work off them
	  	if (!done) {
	  		setTimeout( function () {
	  			
	  			startGamma = ev.gamma;
	  			startBeta = ev.beta;
	  			
	  			done = true;
	  		
	  		}, 1/60)
	  	}
	  	
	  	// calculate difference from start value to actual value and divide by a factor to get a smaller amount.
	  	gammaDifference = (ev.gamma - startGamma) / 8;
	  	betaDifference = (ev.beta - startBeta) / 8;
	  
	  	// set element property to the values as they change
		hypeDocument.setElementProperty(ele, 'left', obj.left + Math.round(gammaDifference), 0.2, 'linear');
		hypeDocument.setElementProperty(ele, 'top', obj.top + Math.round(betaDifference), 0.2, 'linear');
		
		// display results
		hypeDocument.getElementById('beta').innerHTML = Math.round(betaDifference);
		hypeDocument.getElementById('gamma').innerHTML = Math.round(gammaDifference);
	
	}

}

// call above function and pass a Hype element in as an argument
moveObject(hypeDocument.getElementById('myPic'))

Here is a supporting document. (size is high because of image :slight_smile:)

orientationDemo.hype.zip (1.4 MB)

2 Likes
5

Thanks guys for the replies, this is excellent, and thanks so much for the demo! :slight_smile:

6

Hiya, Sorry to ask a question after such a long time, and it is probably a silly question too, but how can I change the orientation of the tilt.

In portrait holiding an ipad I get up for up, down for down, left for left and right for right.

But once I hold it in landscape (my end goal for viewing this) the controls dont rotate so tilting what would then be up still tilts left/right.

Is this an easy change? I had a look and came unstuck for some reason :slight_smile:

Thanks,

Jamers

7

What you’ll need to do is swap the alpha/beta/gamma meanings when you hit certain rotations. I don’t have the code to do that, though it might exist via searching on the internet (as this isn’t Hype-specific).

1 Like