New question

Question:

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:

  • 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
     
  • 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