JavaScript-30-Day-16

#javascript #css #github #webdev

CSS Text Shadow Mouse Move Effect

demo

What we will be working on today is a CSS animation in which when you move your mouse, the shadow sort of follows it around.

How? We will dynamically update the style on the element depending on the position of our mouse.

This is the HTML we start working with:

<div class="hero">
      <h1 contenteditable>🔥WOAH!</h1>
    </div>

Now we will listen for a mousemove event on our element with class hero, and when that changes we are going to figure out how far and where we should put the text shadow.

First we'll grab hero:

const hero = document.querySelector(".hero");

Now we will attach our event listener:

hero.addEventListener("mousemove", shadow);

Now inside our shadow function:

First thing we need todo is get the width and height of the thing we have hovered over which is hero in this case:

const width = hero.offsetWidth;
const height = hero.offsetWeight;

ES6 way to do it is:
const { offsetWidth: width, offsetHeight: height } = hero

Now we will figure out where the persons cursor was:

let { offsetX: x, offsetY: y } = e;

But if try to print (x,y) we'll see a issue, as soon we reach the text the coordinate values become inconsistent.

Why? Because even though we are listening for mousemove on the hero but if there are children elements inside of the hero, it's going to give the (x,y) of the actual elements that we hovered on , which is kind of a pain.

So we need consistent x and y values so we'll figure put if, what we are hovering on is an h1 element, then modify the x and y values accordingly.

In our function:

this is the div with class of hero(what we listened on),therefore the this value is always going to be hero.

e.target will be what the event got triggered on,it will change sometimes, here if we hover elsewhere it will be div and if we hover on the text it will be h1 tag.

So,

 if (this != e.target) {
          x = x + e.target.offsetLeft;
          y = y + e.target.offsetRight;
        }

Basically we are adding how far we are we from the top and left to get the right coordinates if we are hovering on the h1 tag.

Now that we have the correct co-ordinates,we will figure out how far the text shadow should actually go.

We will calculate a walk which is how many pixel at it's most should the shadow be stretched.

If 100 is our walk 50 is as high (in the bottom right corner of the screen) as we go and -50 is as low (in the upper left corner of the string) as we go, where our element is placed in the middle.

const walk = 100;
const xwalk = Math.round((x / width) * walk - walk / 2);
const ywalk = Math.round((y / width) * walk - walk / 2);

Formula makes sure instead of going from 0 to 100 we go from -50 to 50.

Now grab text and set shadow

        const text = document.querySelector("h1");

        text.style.textShadow = `
        ${xwalk}px ${ywalk}px 0 rgba(255,0,255,0.7),
        ${xwalk * -1}px ${ywalk}px 0 rgba(0,255,255,0.7),
        ${ywalk}px ${xwalk * -1}px 0 rgba(0,255,0,0.7),
        ${ywalk * -1}px ${xwalk}px 0 rgba(0,0,255,0.7)`;
      }