Heute kam jemand zu mir und meine er hätte eine Webseite gesehen die man durch kippen des Smartphones scrollen könnte. Das fand er ganz toll und wollte es auch haben, da er aber keine Ahnung hat wie sowas geht musste ich es mal wieder richten. Dass man per JavaScript verschiedene Hardwaresensoren eines Smartphones oder Tablet auslesen kann war mir bekannt, die so gewonnenen Werten könnte man jetzt benutzen um die Seite per JavaScript hoch und runter scrollen zu lassen.
Ich habe mich also mal schlau gemacht wie sowas geht. Erstaunlicherweise ist dazu nicht mal ein großes Framework nötig, es gibt 2 Funktionen die es recht einfach ermöglichen die Bewegungssensoren von Smartphones oder Tablets abzufragen. Bei MDN findet man dazu deviceorientation und devicemotion. DeviceOrientationEvent liefert Informationen darüber wie das Gerät gehalten wird, DeviceMotionEvent liefert Informationen über die Beschleunigung des Geräts.
Die Umsetzung meines Vorhabens ist dann recht schnell erledigt, man startet einen EventListener der bei "devicemotion" eine Funktion aufruft die Abfragt ob das Gerät beschleunigt wird und dann mit window.scrollBy entsprechend hoch oder runter scrollt. Wer das ganze mal testen möchte kann sich eine HTML Seite mit folgendem Code anlegen und mit einem Smartphone oder Tablet aufrufen. Durch vor und zurück kippen des Geräts sollte die Seite hoch und runter scrollen.
<html> <head> <style> body{font-size:2em;} </style> <script> function devicemotion(event) { document.getElementById('x').innerHTML = event.accelerationIncludingGravity.x; document.getElementById('y').innerHTML = event.accelerationIncludingGravity.y; document.getElementById('z').innerHTML = event.accelerationIncludingGravity.z; if(event.accelerationIncludingGravity.z > 8) { window.scrollBy(0,100); } if(event.accelerationIncludingGravity.z < 5) { window.scrollBy(0,-100); } } window.onload = function() { if(window.DeviceMotionEvent !== undefined) { window.addEventListener('devicemotion', devicemotion, false); } } </script> </head> <body> <p>Position X: <span id="x"></span></p> <p>Position Y: <span id="y"></span></p> <p>Position Z: <span id="z"></span></p> <br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />Ende </body> </html>
Wer das in eine fertige Webseite intigrieren möchte kann folgenden Code einfach in den Head seiner Seite einbauen. Bei Bedarf kann man event.accelerationIncludingGravity.z > 8 und event.accelerationIncludingGravity.z < 5 anpassen um den Neigungswinkel der das scrollen auslöst zu ändern.
<script>
function devicemotion(event){
if(event.accelerationIncludingGravity.z > 8){window.scrollBy(0,100);}
if(event.accelerationIncludingGravity.z < 5){window.scrollBy(0,-100);}
}
window.onload=function(){
if(window.DeviceMotionEvent !== undefined){window.addEventListener('devicemotion',devicemotion,false);}
}
</script>
Ich habe es mit meinem Android 4.4.2 Telefon und dem Standard Android Browser getestet, da funktioniert es problemlos. Wie es mit anderen Geräten aussieht kann ich nicht sagen da ich gerade nichts anderes zur Hand habe. Über Sinn und Zweck des ganzen kann man sicherlich streiten, ich finde sowas eher nervig da man damit beim lesen das Telefon gerade halten muss. Außerdem kennen die wenigsten User diese Funktion und meinen dann wohl eher ihr Telefon oder die Webseite sei kaputt. Aber ich muss ja nicht alles gut finden was ich programmiere, für Freunde und gute Bekannte erfülle ich auch die verrücktesten Wünsche wenn sie nett fragen. Um kleine Spiele oder ähnliches zu programmieren ist die Möglichkeit auf die Hardwaresensoren zuzugreifen auf jeden Fall interessant.
Kommentare