DEV Community

loading...

Holographic Effect on Web

annlin profile image ann lin ・2 min read

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.

Discussion

pic
Editor guide
Collapse
razman7 profile image
razman7

Hey Linxea this is really cool, I was wondering if it's possible to make the mouse movement react to the mouse moving vertically as well?

So for example, angling the gradient at 45degrees and then having it move on both y and x axes.

Collapse
mazentouati profile image
Mazen Touati

That's dope, well done. i liked the music and the bear tho 😂

Collapse
annlin profile image
ann lin Author

aww thanks :)