This content originally appeared on DEV Community and was authored by KUMAR HARSH
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.targetwill be what the event got triggered on,it will change sometimes, here if we hover elsewhere it will bedivand if we hover on the text it will beh1tag.
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)`;
}
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:
Blog on Day-15 of javascript30
Blog on Day-14 of javascript30
Blog on Day-13 of javascript30
Follow me on Twitter
Follow me on Linkedin
DEV Profile
You can also do the challenge at javascript30
Thanks @wesbos , WesBos to share this with us! ??
Please comment and let me know your views
Thank You!
This content originally appeared on DEV Community and was authored by KUMAR HARSH
KUMAR HARSH | Sciencx (2021-06-16T16:58:52+00:00) JavaScript-30-Day-16. Retrieved from https://www.scien.cx/2021/06/16/javascript-30-day-16/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.