wagerfield / parallax

Parallax Engine that reacts to the orientation of a smart device
http://wagerfield.github.io/parallax/
Other
16.47k stars 2.14k forks source link

Paralax only working on x axis - Mobile - IOS 13 #278

Closed Timothy-Tolley closed 6 months ago

Timothy-Tolley commented 4 years ago

Hi there,

I'm trying to get parallax to work on Iphone with IOS 13. I've set up the permissions no problem and parallax is started but for some reason only the x axis responds to the gyroscope. Here is the relevant code:

var dot = $('#dot');
var scene = document.getElementById('scene');
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
    document.addEventListener('click', () => {
        if ( location.protocol != "https:" ) {
            location.href = "https:" + window.location.href.substring( window.location.protocol.length );
        }
        DeviceOrientationEvent.requestPermission()
            .then(response => {
                if (response == 'granted') {
                    window.addEventListener('devicemotion', (e) => {
                        dot.attr("data-depth", "-5") 

                        var parallaxInstance = new Parallax(scene);

                    })
                }
            })
            .catch(console.error)
    })
} 


```#scene {
    position: relative;
    width: 400vw;
    height: 400vw;
    z-index: 19;
}

.dot {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('dot.svg');
    background-repeat: no-repeat;
    background-position: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
}

@media (max-width: 2000px) {
    #scene {
        width: 400vw;
        height: 400vh;
        left: -150vw;
        top: -150vh;
    }

    .dot {
        -webkit-transition: .5s top ease-out, .5s left ease-out;
        -o-transition: .5s top ease-out, .5s left ease-out;
        transition: .5s top ease-out, .5s left ease-out;
    }
}```

```<div id ="scene" data-relative-input="true">
    <div data-depth="-5" class="dot" id ="dot"></div>
  </div>```

Thanks in advance, 
Tim
mrhorse commented 4 years ago

Just been looking at this - think you want to look at the DeviceMotionEvent rather than DeviceOrientationEvent, though you've probs figured that out by now :)