
Lab 29 was about creating a web page where the user could move the shadow of a word with their mouse. The HTML set up was quite simple, with an <h1> inside of a div. In the JS, I first stored the div and the <h1> in their own variables. I created a function called shadow that determined where the mouse was. Based on this position, the function created an exact copy of the text that was in the <h1> and placed it where the user put the mouse, the color of this text being a different color. Other copies of the <h1> were made but they were positioned opposite or adjacent to the position of the mouse using the offset property of the JS library. Finally, using .addEventListener, a mouseover event listener was added to the original <h1> which called the shadow function and made a shadow that followed the user's mouse.
These skills are important for a web designer because they make a site look more lively. Having properties of a site, like text shadows, change as the user interacts with it makes a less boring user experience. Instead of having a stale, constant website, you can have one that is more active and energetic. It makes the website fun to use and keeps the retention rate of your website high.
Comments
Post a Comment