Holographic Effect on Web

#deviceorientation #holographiceffect #css

Demo

HOLOGRAPHIC EFFECT IS AWESOME,

so I'm going to make my own version of holographic effect today.

Demo Code below, open in mobile browser to see my little achievement.

css

Google and colour-pick a random holographic picture to get the lovely colours for our linear-gradient. Set background-size to 200% so we can move the colours around later on.

#holographic {
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(
        to right,
        rgb(194, 255, 182),
        rgb(255, 163, 182),
        rgb(221, 169, 255),
        rgb(162, 209, 255)
    );
    background-size: 200%;
}

Detecting Device Orientation

I use alpha and set the maximum background-position to be 100% so that the linear-gradient will not repeat from the start. Everyone should play with device orientation events, they're freaking fun.

window.addEventListener("deviceorientation", handleOrientation, true);
      function handleOrientation(event) {
        const z = event.alpha; // rotation degrees from 0 to 360

        const holographicElement = document.getElementById("holographic");
        holographicElement.style.backgroundPosition =
          Math.min(Math.abs(z), 100) + "%";
}

Feedback

It kinnnndda works, I think we can find better calculation to make it smoother and less buggy. But for now, within the time limit I set for myself, I'm prettty satisfied with the slight holographic effect achieved by rigorously rotating or moving my phone. :>

YES I MADE A VIDEO WITHIN 2 FREAKING HOURS. GIVE ME A CLAP.
FOLLOW ME AND SUBSCRIBE TO MY YOUTUBE CHANNEL.
CLICK HERE AND CLICK THERE AND CLICK EVERYWHERE.