Mouse Move Parallax

It did make me look at this as a tutorial to WebGL

https://www.tutorialspoint.com/webgl/webgl_quick_guide.htm

Which kinda reminds me of something else I have been looking at p5.js which uses a canvas and seems to be aimed at making Javascript/animation simple for newbies. ( not to sure about that )

3 Likes

Thanks for sharing Mark,

Omg lol wow he’s quite spiffy! That said, Id like nothing more than what he had. Seriously, he speaks with his hands and his face. Yes, his face, its when he does these wacky facial expressions.

2 Likes

So true, he is one of my favourite people to watch on youtube. Awesome guy.
Check out the rest of his channel including his code challanges where he is challanged to create an animation in said number of minutes from scratch… whacky fun.

2 Likes

While this is a very old thread, I am facing the same questions right now and I too found that parallax.js script. Eventually I was able to make it run with Hype:
TEST_parallaxJS.hype.zip (122.2 KB)

But even the oficial examples wont run on android smartphones, but seems to be working fine on desktop.

It looks like the parallax library uses deviceorientation/devicemotion events for the effect on mobile, instead of based on the mouse location. On iOS 12, these are disabled by default (as they are considered a security/privacy issue) and up to a user to enable them in the settings, and then I think the page still needs to be served over HTTPS. I couldn’t find a definitive answer, but it looks like a recent version of Chrome may have also disabled these for Android so I’d guess that is what you are hitting.

The good news is that it appears that iOS 13 has a DeviceOrientationEvent.requestPermission() from this spec, and so I’d expect this to also be a part of Chrome as well. Then libraries like Hype or parallax can request access when needed; alternatively you could make this call yourself as well. I haven’t looked into seeing if it works on iOS or Chrome for Android yet.

3 Likes