JavaScript30 — Day 16
Mousemove shadow effect magic.
Today’s project focused on using the “mousemove” event to trigger responsive text shadows! This technique can also be used on mobile devices, but rather than a mouse moving, it responds to the amount you tip your device side to side.
Bits
- Something a lot of these JS30 projects have focused on lately is page position, or creating variables to represent coordinates on a browser window (or on an element within the browser). I’m starting to get a better idea of the information we need to store as JS variables in order to create functions that rely on coordinates from the browser: the width and height of the element our event listener is placed on, as well as the offsetX and offsetY coordinates registered by any mouse event.
- When setting the position of our various text shadows (there are four of them in the image above), I felt I grasped the functionality of template strings more clearly than I have before. Our xWalk and yWalk values are JS variables that change (and change rapidly) based on the position of our mouse. To write CSS properties that should adjust based on a browser event, you create a JS variable that stores the oft-changing values, and putting those JS variables into template strings allows your style properties to update just as frequently and fluidly.
Blindspots
- We touched upon some ES6 syntax in this project that I need to do some more research into to understand. I’ll include a picture of my initial attempts to comprehend it here:
- I wasn’t super clear on using the event target property in the “if” statement meant to adjust x and y values for the h1 element. I went back into my program and logged both “this” and “e.target” to the console to see if I could gain more clarity. I suppose that because the shadow function is linked to the mousemove event, which are both attached to the “hero” div, the event target is always going to be the hero div. However, it seems like “this” changes based on which element the mouse is hovering over. This concept feels like it will sink in over time and with practice, but we aren’t quite there yet.
Breakdown
I’m briefly revisiting my JSON.stringify() method blindspot from yesterday! It honestly helped a lot just to re-Google “what does JSON stand for”. Once I remembered that it stands for “JavaScript Object Notation”, I realized that any method attached to JSON is going to be related to how object data is written (notated?). In the case of .stringify(), we pass objects into this method, and they emerge as strings. If we wanted to reverse the effect (convert a string of key-value pairs back into an object), we could use JSON.parse().
There’s a whole lotta comment in today’s code. I realize that it doesn’t leave my code looking *super clean*, but my hope is that each of these projects will be little receptacles of knowledge that I can return to when working on other programs! You can find my comment-y code here.
