New question

Question:

 
  4  
 
 
Qué Código Karma: 2708 Colombia
 
 Date: 03-01-2016 15:22:30 (In Spanish)

Usar sensor de movimiento JQuery[Resolved]

Hola amigos, en el día de hoy vengo a preguntarles si hay forma de usarlar el sensor de movimiento desde JQuery, me explico un poco.
Tengo una web responsive con fondo dinámico usando JQuery, y me toca ponerlo fijo en el móvil, pero quisiera saber ¿cómo puedo hacer que se mueva según el sensor de movimiento del móvil?.

Salu2 Tags: JQuery - JQuery Mobile - Mobile - Question Votes: 4 - Answers: 2 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  •  
      2  
     
     
    Fernando Mosquera Karma: 10200 Argentina
     
    Date: 05-01-2016 05:35:17 Hola Edinson, lo que puedes hacer es utillizar la "API de Orientación del dispositivo" para detectar la orientación de la pantalla del usuario y hacer los cambios necesarios en la aplicación.

    Link a la documentación oficial de la W3C: http://www.w3.org/TR/orientation-event/

    Lo primero que debes haces es verificar la compatiblidad del navegador, esto lo puedes hacer de la siguiente forma:
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function onLoad() {
                if (!window.DeviceOrientationEvent) {
                    alert('No hay soporte para DeviceOrientationEvent');
                }
            }
        </script>

    </head>
    <body onload="onLoad();">
    </body>
</html>


    Por medio de la escucha del evento "deviceorientation" podremos recuperar cuatro valores de la API:
    * absolute – este valor nos indica si el dispositivo está proporcionando el valor absoluto.
    * alpha – este valor estará en el rango de 0 a 360, y representa el movimiento del dispositivo en el eje z.
    * beta – este valor estará en el rango de -180 a 180, y representa el movimiento en el eje x.
    * gamma – este valor estará en el rango de -90 a 90, y representa el movimiento en el eje y.

    Veamos un ejemplo:
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function onLoad() {
                if (!window.DeviceOrientationEvent) {
                    alert('No hay soporte para DeviceOrientationEvent');
                }else{
                    window.addEventListener("deviceorientation", orientacion, true);
                }
                
            }
            function orientacion(event) {
                document.querySelector('.absolute').innerHTML = event.absolute;
                document.querySelector('.alpha').innerHTML = event.alpha;
                document.querySelector('.beta').innerHTML = event.beta;
                document.querySelector('.gamma').innerHTML = event.gamma;
            }
        </script>
    </head>
    <body onload="onLoad();">
        Absolute: <div class="absolute"></div>
        Alpha: <div class="alpha"></div>
        Beta: <div class="beta"></div>
        Gamma: <div class="gamma"></div>
    </body>
</html>

    Link a la demo online: https://jsfiddle.net/98wdpau8/ <-- solo se mostrarán los datos si estas en un "dispositivo móvil".

    Aquí te dejo un ejemplo con una pelotita roja que se mueve en función del movimiento del dispositivo móvil.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .movil{
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius: 50%;
                position: absolute;
                top:50%;
                left:50%;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">
            var posicionOrigTop = 0;
            var posicionOrigLeft = 0;

            function onLoad() {
                if (!window.DeviceOrientationEvent) {
                    alert('No hay soporte para DeviceOrientationEvent');
                } else {
                    this.posicionOrigTop = $('.movil').position().top;
                    this.posicionOrigLeft = $('.movil').position().left;
                    window.addEventListener("deviceorientation", orientacion, true);
                }
            }
            function orientacion(event) {
                var x = event.beta;
                var y = event.gamma;
                $('.movil').css({'top': this.posicionOrigTop + (x * 4), 'left': this.posicionOrigLeft + (y * 4)});
            }
        </script>

    </head>
    <body onload="onLoad();">
        <div class="movil">&nbsp;</div>
    </body>
</html>

    Link a la demo online: https://jsfiddle.net/quq6k2jr/ <-- solo se moverá la pelotita roja si estas en un "dispositivo móvil".

    Otras funciones Javascript que pueden ser útiles al momento de identificar si el dispositivo esta "parado" (Portrait) o "acostado" (Landscape):

    function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}


    Espero que mi respuesta te sea de ayuda.

    Saludos,

    PD: si alguien quiere mejorar el ejemplo de la pelotita roja, bienvenido sea, ya que solo esta desarrollado para que funcione en "Portrait" y no estan contemplados los limites de la pantalla.       Votes: 2 - Link answer
     
  •  
      1  
     
     
    Qué Código Karma: 2708 Colombia
     
    Date: 05-01-2016 11:46:30 Que genial gracias.
    +1 Pregunta Resuelta       Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com