{"id":22345641,"url":"https://github.com/gerhynes/mouse-shadow","last_synced_at":"2025-03-26T10:22:22.087Z","repository":{"id":106046294,"uuid":"107322503","full_name":"gerhynes/mouse-shadow","owner":"gerhynes","description":"A page created to practice manipulating styles using mouse position. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-21T12:44:33.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:49:37.599Z","etag":null,"topics":["javascript","javascript30","text-shadow"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/mouse-shadow/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-17T20:52:37.000Z","updated_at":"2018-01-23T21:44:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"cbb4cbc3-a1df-4418-a8e1-a13abf18cf2a","html_url":"https://github.com/gerhynes/mouse-shadow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fmouse-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fmouse-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fmouse-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fmouse-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/mouse-shadow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632743,"owners_count":20647271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript30","text-shadow"],"created_at":"2024-12-04T09:18:18.317Z","updated_at":"2025-03-26T10:22:22.075Z","avatar_url":"https://github.com/gerhynes.png","language":"JavaScript","readme":"# Mousemove Text Shadow\n\nA page created to practice manipulating styles using mouse position. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of mouse move effect page](https://res.cloudinary.com/gerhynes/image/upload/v1516535464/Screenshot-2018-1-21_Mouse_Shadow_mgkd84.png)](https://gk-hynes.github.io/mouse-shadow/)\n\n## Notes\n\nListen for a mousemove event on the `hero` element and when that changes work out the location and size of the text shadow.\n\nSelect the `hero` and the `h1` inside it.\n\nMake a function, `shadow`, and pass it the event.\n\nAdd a mousemove event listener to `hero` and set it to run `shadow`.\n\nInside `shadow`, get the width and height of `hero`, and the location of the cursor.\n\n```js\nconst { offsetWidth: width, offsetHeight: height } = hero;\nlet { offsetX: x, offsetY: y } = e;\n```\n\nIf you hover in the top left corner of the window you will get x and y values close to 0. But if you hover in the top left corner of the `h1` you also get values close to zero.\n\nAlthough you are listening for the x and y values for `hero`, if there are children elements inside `hero` and you hover over them, you will get _their_ x and y values.\n\n`e.target` will be the thing that the function triggered on, while `this` will be the thing that it listened on.\n\nUse an if statement to compensate for this. If `this` and `e.target` are different things, add `e.target.offsetLeft` and `e.target.offsetTop` to the x an y values respectively.\n\n```js\nif (this !== e.target) {\n  x = x + e.target.offsetLeft;\n  y = y + e.target.offsetTop;\n}\n```\n\nNow you need to figure out how far the textshadow should go, i.e the walk.\n\nCreate a `walk` variable and set it to 200px.\n\nIf the walk is 200px in total you want to offset the textshadow to 100 and -100.\n\nAll the way at the top left you should get -100, -100 and all the way to the bottom right should give 100, 100.\n\n```js\nconst xWalk = Math.round(x / width * walk - walk / 2);\nconst yWalk = Math.round(y / height * walk - walk / 2);\n```\n\nUsing the `style` attribute, set the `text`'s `textShadow` to `${xWalk}px ${yWalk}px 0 red`.\n\nThe text shadow values will be updated as you move the cursor around the element.\n\nYou can add in extra, contrasting, text shadows by multiplying the `xWalk` and `yWalk` by -1.\n\n```js\ntext.style.textShadow = `\n    ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),\n    ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),\n    ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),\n    ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)\n   `;\n```\n\nRemember, when dealing with events, you can use offsetX and offsetY to get the position where your cursor is. However if you have nested elements you will need to compensate for them.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fmouse-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fmouse-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fmouse-shadow/lists"}