Tilt-O-Scroll

Until recently, mobile accelerometer & gyroscope driven actions were fairly device specific & limited to native applications. There just wasn't a reliable way of accessing the sensors across browsers.

Fortunately, the gyro.js library offers relief, rolling up sensor protocols for iOS, Chrome, and Firefox into a streamlined API, enabling a broad range of motion dependent behavior on Android & iOS.

So, instead of scrolling through webpages with your greasy fingers, (what is this 2011?), you can use your phone's gyro to automatically scroll up & down when you tilt your phone toward or away from you. After all, your Doritos, TV remote, and venti soy pumpkin spice latte aren't going to work themselves!

10 Set baseline position at 45° from vertical - the way most people hold their phones 20 Poll gyro sensor at regular intervals to check position 30 Calculate difference between current position & baseline 40 If difference is within trigger bounds, scroll page 50 GOTO 20

Orientation & Tilt Zones
Orientation & Tilt Zones

```js function tiltScroll(y) { window.scrollBy(0,y); } function tiltColor(c) { $(‘p’).css( “color”, c); }

gyro.frequency = 300; // set polling interval to 300ms gyro.startTracking(function(o) {

var b0 = 45;        // set baseline
var b1 = o.beta;    // get gyro data
var db = b1 - b0;   // calculate tilt delta

var g0 = -45; 		// use gamma plane for landscape orientation
var g1 = o.gamma;
var dg = g1 - g0;

// set angular bounds for up & down scroll zones with a 45 degree 'baseline'
if ((db > 3 && db < 15) || (dg < -5 && dg > -25)) {
	tiltScroll(-25)     // up
	tiltColor("blue")

} else if ((db < -5 && db > -25) || (dg > 3 && dg < 15)) {
		tiltScroll(25)  // down
		tiltColor("red")

	} else { tiltColor("black") }  // reset }); ```

To ensure a consistent UX across devices, consider using the percentage change in tilt rather than the absolute difference. 12° & 20° intervals work well for phones, but may not be ideal for tablets. Additionally, if you're designing for both portrait and landscape orientations, you'll probably need to incorporate alpha & accelerometer data.

Download the demo, <a class = "nodeco" href=https://github.com/tomgco/gyro.js target="_blank" title="Download gyro.js"> Get gyro.js, and join the discussion

2017 Neal Shyam