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
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 :)
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: