go backThumbless Scrolling
When we found out how easy it is to detect the smartphone’s orientation by accessing the gyroscope, we experimented with it and came up with some cool ideas. Our favourite usecase is the Thumbless scrolling by tilting your phone.
Why could this be useful?
First of all, the users thumb or other fingers don’t collide with the information on the screen – Everything is always visible during scrolling.
Furthermore it can be much more convenient to gently tilt your device than always replacing and moving your thumb while reading long texts.
Once we finalized our prototype, we will test this functionality on long reads and see how often the “thumbless scrolling” will be activated. If you’re interested in trying it on your own, click here.
Here’s how you access the gyroscope data via javascript. In this example you get values for rotation, vertical- and horizontal tilting.
window.ondeviceorientation = function (event) {
alpha = Math.round(event.alpha); // Returns the rotation
beta = Math.round(event.beta); // Returns vertical tilting
gamma = Math.round(event.gamma); // Returns horizontal tilting
}
For the first prototype (you can try above) we matched the vertical tilting values to the body scroll position and added a breakpoint so it doesn’t start scrolling at slight shakes.
Still here?
We manipulated the position of a div with this data and created a simple math game for smartphones. It checks the position of the divs that show either the right or wrong sum of the calculation.
.gif)
A gyroscope powered game
Test it here.
It’s getting a bit more advanced when we are passing the data from on device to another to create some kind of Wii-controller.
.gif)
A remote controller
Berlin subway map compared to its real geography
Story + Collection
Berghaintrainer at Somerset House
Live in action.
