DeviceOrientationEvent compas

by lovromar

HTML

<div class="container" style="-webkit-perspective: 300; perspective: 300;">
  <img src="http://lorempixel.com/400/200/" id="imgLogo"  width="margin:0 auto;max-width:100%" class="logo">
</div>
   
    
    
    
<!--

http://www.3d-anaglyph.com/3D-gallery/2010/10/Disney-Anaglyph.jpg

http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/256x256/places/crystal-style/mail-folder-outbox.png


http://artesansdevalldoreix.cat/images/1237561095592384773babayasin_Hand_cursor.svg.hi.png
-->

CSS

.logo {
   margin:0 auto;
    max-width:45%;

}

JavaScript

init3();
        var count = 0;
    
        function init() {
            if (window.DeviceOrientationEvent) {
                console.log("DeviceOrientation is supported on this device");
            } else if (window.OrientationEvent) {
                console.log("DeviceOrientation is supported on this device via MozOrientation");
            }
        }
        
        function init2() {
            if (window.DeviceOrientationEvent) {
                // Listen for the deviceorientation event and handle DeviceOrientationEvent object
                window.addEventListener('deviceorientation', devOrientHandler, false);
            } else if (window.OrientationEvent) {
                // Listen for the MozOrientation event and handle OrientationData object
                window.addEventListener('MozOrientation', mozDevOrientHandler, false);
            }
        }
        
        function init3() {
            if (window.DeviceOrientationEvent) {
               // document.getElementById("doEvent").innerHTML = "DeviceOrientation";
                // Listen for the deviceorientation event and handle the raw data
                window.addEventListener('deviceorientation', function(eventData) {
                    // gamma is the left-to-right tilt in degrees, where right is positive
                    var tiltLR = eventData.gamma;
                    
                    // beta is the front-to-back tilt in degrees, where front is positive
                    var tiltFB = eventData.beta;
                    
                    // alpha is the compass direction the device is facing in degrees
                    var dir = eventData.alpha
                    
                    // deviceorientation does not provide this data
                    var motUD = null;
                    
                    // call our orientation event handler
                    deviceOrientationHandler(tiltLR, tiltFB, dir, motUD);
                    }, false);
            }...