JavaScript-30-Day-16
Tags: javascript, css, github, webdev
Published: 2021-06-16 16:58:52

## <center>CSS Text Shadow Mouse Move Effect</center>

## [demo](https://cenacrharsh.github.io/JS-30-DAY-16/)

![ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub115qu5zk0b7vju0u2d.png)

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:

```html
<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:

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

Now we will attach our event listener:
```javascript
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:

```javascript
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:

```javascript
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,

```javascript
 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.

```javascript
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

```javascript
        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)`;
      }
```

> We have used multiple textShadow properties using varying co-ordinates and different colors for better effect.

and with this our project for the day was completed.

GitHub repo:
{% github cenacrharsh/JS-30-DAY-16 no-readme %}

###Blog on Day-15 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-15-l8j %}

###Blog on Day-14 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-14-3p0i %}

###Blog on Day-13 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-13-337i %}

##[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
##[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos  , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!