0

So basically I've seen a lot of advance animation websites. And I tried to create a image wherein it follows the images as I move my mouse cursor along with div coordinates.

Basically the code is like this in my codepen.

https://codepen.io/myth-vince/pen/PoQJOXj

When you try to move the cursor into the image..it will just like teleport on the top left because I think that is the constant rect height ord width of the image.

If anyone can help me with this..It will be a big thanks. I've created some advance animation like this but never met this before that just teleport suddenly.

I believe it has something with this

var rect = e.target.getBoundingClientRect();
        console.log(rect)
        var x = e.clientX - rect.left; //x position within the element.
        var y = e.clientY - rect.top;  //y position within the element.

Or maybe the SCSS but I don't know where because everything seems fine..but I think the only really problem here is because when I try to make it also center the image in the mousecursor it will just adjust itself and will not align in center of mousecursor cause it is avoiding it to teleport.

EDIT

For more information.. the part of mouseover and mousemove the mousemove will only starts when the mouse is hovering the div so it the image will start to move out.

Now for the second I need to get the e.clientX and e.clientY so that it could get the where the part of div is. And as rectX and rectY is the getting the height and width part of it

Show DIV at mouse cursor on hover of span

you can see it here the link.

and where did I get the delaying the motion of images is here

https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To%20stop%20it%20after%20running,reached%20that%20number%20clear%20it.

Myth Vince
  • 143
  • 9
  • 1
    First of all, please note that a proper [mre] of your issue belongs _directly_ inside your question, not just dumped onto an external platform. – CBroe May 24 '22 at 12:08
  • On every `mouseover`, you add a _new_ `mousemove` handler. And I don't see you _removing_ those again anywhere, so they will accumulate. That is probably not a good idea. – CBroe May 24 '22 at 12:10
  • oh wait I haven't think of that wait lemme try it. – Myth Vince May 24 '22 at 12:24
  • Actually no. I don't have to use removing it cause I didn't used a `add` in the function so there's nothing on it..It is just about moving. Plus the reason I have `mouseover` is because it will only move when the mouse is hover on the div. – Myth Vince May 24 '22 at 12:28
  • Actually, yes - you _are_ adding a new, additional `mousemove` handler every time the `mouseover` event fires. Even if that is not the cause of your problem, it makes very little sense. (And might also affect performance, once you added a couple hundred or more.) – CBroe May 24 '22 at 12:33
  • I already add someinformation in my codepen. – Myth Vince May 24 '22 at 12:34
  • _"Plus the reason I have mouseover is because it will only move when the mouse is hover on the div."_ - the `mousemove` event for `box` _can_ only fire, when the mouse currently _is_ over `box` already. This is nothing but superfluous, and removing the whole `mouseover` wrapped around the `mousemove`, still gets you the exact same result. – CBroe May 24 '22 at 12:36
  • It still does the same..even If I remove the mouseover..when I'm trying to move suddenly in the image it will teleport in the top left. – Myth Vince May 24 '22 at 12:39
  • The images make the `x` and `y` teleport suddenly in top left – Myth Vince May 24 '22 at 12:43

1 Answers1

1
var rect = e.target.getBoundingClientRect();

There's your problem.

Like most other event types, the mousemove event bubbles up through the DOM.

When you put the cursor over one of those images - then e.target is not the box any more, but that particular image. So you are not working with the getBoundingClientRect data relating to your box now, but to the particular image.

As soon as you make this

var rect = box.getBoundingClientRect();

instead, the problem is gone.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • wait I have last question...I set an opacity when its leaving and entering in the pictures..when the mouse leave the div it will make the pictures opacity:0 and if enters then it will be opacity:1.. – Myth Vince May 24 '22 at 14:45
  • https://codepen.io/myth-vince/pen/PoQJOXj here's the codepen for it. – Myth Vince May 24 '22 at 14:48
  • can you find the error why is it not working? – Myth Vince May 24 '22 at 14:57
  • I'm guessing because you still got an interval running at the time, that executes `pictures[timesRun - 1].style.opacity = "1"`. So you set the opacity to 0 on mouseleave, but this will set it back to 1 again. – CBroe May 25 '22 at 06:33
  • oh don't mind it i already got it hehe.. – Myth Vince May 25 '22 at 13:54