How to add mouse-tracking effect to specific wordpress row?

user_11733688 0
Viewed 192

I am trying to add a mouse-tracking effect to my wordpress website. I did it, but I don't know how to add the effect to a specific row.

A short introduction, I know something about the CSS language, but a bit or nothing about HTML and JS. This is what I've done:

Once created the mouse-tracking effect, I've tried to add it to a specific row using CSS (adding to the class ball static and absolute positions), but it doesn't work. So I create a new row ID (#container), assuming to apply the class ball to the new row ID, but I don't understand how to do it.

HTML:

<h1>Giovanni</h1>`
    <div class="ball">
</div>

JS:

<script type="text/javascript">

  document.addEventListener("mousemove",function (event) {
      const mouseX = event.pageX
      const mouseY = event.pageY

      const ball = document.querySelector("div.ball")

      ball.style.left = mouseX + "px"
      ball.style.top = mouseY + "px"
  })
</script>

Mouse-tracking effect works ok, but all-over the page.

wordpress css html javascript
1 Answers

It works on the entire page because you are binding it to the entire document with document..

You need to target the right element in the dom, in this case using: document.getElementByClassName("ball"); because you are targeting for certain class name, if you wanted to use an ID you would use document.getElementById("ball");

Where document. returns the entire page, these two functions returns OF the entire document the elements with the especified classes or id's.

<h1>Giovanni</h1>`
<div class="ball"></div>
<script type="text/javascript">

var el = document.getElementByClassName("ball"); //select the div with ball class
el.addEventListener("mousemove",function (event) {
const mouseX = event.pageX
const mouseY = event.pageY

const ball = document.querySelector("div.ball")

ball.style.left = mouseX + "px"
ball.style.top = mouseY + "px"
})

</script>
user_97245510
Related