Device Orientation with Vanilla JavaScript (Vintage Hologram Effect)

We learn to use the device orientation using vanilla javascript. We use the device orientation to create an old-school (vintage) hologram effect similar as those in this video:
(Polaroid phantagrams The World of Nature Krypton laser holograms by @Smirholo)

You can create this effect with simple, vanilla JavaScript and using two images on your computer. For example, I use the images with Leonard and Radu from here:

Leonard and Radu are characters in many of my Edutainment videos from here:

To test on your device, you can upload your code to github and use github pages, or, as I show in the tutorial, you can use codepen.

⭐ MORE LINKS ⭐

Interpolation Video

Codepen

Same place different seasons:

[juancamacho]

Radu always with unique and awesome content, not just traditional web developing tutorials like a todo list, or e-commerce etc, always showing you how to use JS in diffrent ways.

[alexandremccastro]

You always bring nice content to us, thanks from Brazil!

[pesterenan]

That was a really cool use of the sensors! Imagine making the images from an horror site, that changes when you view them when laying down, and the smartphone is above your head! Hahah nice one Radu!

[EnglishRain]

Dude that's super cool! Your content is greatly unique

[igor]

It's amazing how every time I watch one of your videos I learn so many new things.

[mircast]

Wow. Some really nice project, didn't know the devTools have this feature. Learned again from you. Thanks.

[senorperez]

love you bro, you're making amazing content.... more power to you..

[getsetalk]

Your content is really amazing and different rather than other . Love 💞 thanks from india

[MadaraAzukar]

💯
I have commented this on your previous video

But I have to first turn on it in devtools I'm on Samsung A04e then it works

[checosa]

it would be interesting, starting with the same promise (the tilting of the phone), being able to maintaing the dimension and direction of an image on the screen, so that it cannot distort based on the tilt of the phone (i hope you understand). so when you tilt the image the image remain with the same dimension and prospective visible from any angle.

[alwysrite]

Mate, what web hosting do you recommend? Is there a free one for learning?

[Son_Goku]

is it possible to make compass with javascript and device accelerometer? please do teach that sir

[basiccoder]

is it possible that to switch urls or tabs on browser quickly by tilting phones though👀

[KlinovAS]

Hello. Do these sensors require special permissions in chrome?