wneet

Follow by mouse

Recommended Posts

Hello there,

I have a problem when scrolling the page my follow mouse circle doesn't follow the mouse courser, 

If there is a way how can I make the follow mouse circle follow the mouse courser when scrolling too?

 

 

Share this post


Link to post
Share on other sites
7 hours ago, wneet said:

If there is a way how can I make the follow mouse circle follow the mouse courser when scrolling too?

 

Don't let it scroll. Set its position to fixed.

 

And it would be better to animate x and y Instead left and top.

 

You should also be careful with your CSS transitions. Using all can cause a lot of problems.

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

But I have page with scroll.

If I set position to fixed the page won't scroll down.

My problem is when I scrolling page down the mouse follow animate doesn't work.

Share this post


Link to post
Share on other sites

Hi @wneet,

 

Even during and after a scrolling phase, 'Oscar' follows the mouse - a small movement of the mouse is enough.

 

 

Happy tweening ...

Mikel

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Mikel's idea is probably what you want but instead of using setInterval, you should use requestAnimationFrame

  • Like 2

Share this post


Link to post
Share on other sites

i believe @OSUblake meant to set the circle's position to fixed, not the entire page. Seems to work fine

You still have to move the mouse after scroll because your moveCircle function only gets called when the mouse moves.

 

  • Like 2

Share this post


Link to post
Share on other sites

To get the circle to stay with the cursor when scrolling, try using the 'mousewheel'  event in combo with a TweenLite.set() to keep the circle on (or close to) the cursor while scrolling.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

thanks @Shaun Gorneau

But 'mousewheel' didn't solve the problem.

How can I set position of circle based on window rather than page like cursor?

Share this post


Link to post
Share on other sites
1 hour ago, wneet said:

How can I set position of circle based on window rather than page like cursor?

 

Again, set its position to fixed. 

 

 

 

And stop copying other people's code you don't understand. I've seen that code before, and it's not a good example to follow.

 

 

 

 

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks @OSUblake for your help..

I have been just learning how to use it ..

Share this post


Link to post
Share on other sites

Hey, @wneet, you're doing good.

 

Just in case you had the same gut reaction as I did with Blake's last reponse, he does sound a bit grumpy but he's not. He's super nice and a good teacher, just sometimes his words are a bit too dry.

 

We've all been there (I think) and tried to work with code we don't understand, I certainly do it all the time. Just keep looking at all examples you can find see why they are different and not how old they are. As time passes, the techniques get refined and new ways of doing things are thought of.

 

Happy Tweening!

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi @OSUblake,

 

You are so right: Stop copying other people's code you don't understand!
I still have this stupid habit.

 

 

Thanks

Mikel

 

Share this post


Link to post
Share on other sites

You should make Oscar blink and move his mouth when he's following the mouse, as if he's trying to eat it, Mikel

  • Haha 1

Share this post


Link to post
Share on other sites

@Dipscom

Thank  you so match for your kind response In fact I'm still learning this new technique..

I will do my best to learn it..

  • Like 1

Share this post


Link to post
Share on other sites

Hi @Dipscom,

 

That's the next step.
As you can see in my first pen, I have already tried ...

 

Kind regards

Mikel

 

Share this post


Link to post
Share on other sites

Yes, sorry if I seem grumpy. I just hate that code. I've seen it enough times that I can remember where it came from. 

Share this post


Link to post
Share on other sites

Let's kick this nest of wasps, then...

 

4 minutes ago, OSUblake said:

I just hate that code.

 

Why? What is so wrong that elicits such passion from you, Blake?

 

Oh why so much hate in your heart? Shouldn't we all be more loving?

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, wneet said:

thanks @Shaun Gorneau

But 'mousewheel' didn't solve the problem.

How can I set position of circle based on window rather than page like cursor?

 

I guess I'm not following what it is you're after. Can you tell me if these two statements are true, and if any logic is missing?

 

1. The circle should follow the mouse cursor around the page.

2. When scrolling up or down the page, the circle should stay with the cursor in as close to real time as possible.

 

If so ... my CodePen does exactly that. And if you are not seeing that ... can you tell me which browser and OS you're using?

  • Like 1

Share this post


Link to post
Share on other sites
12 minutes ago, Dipscom said:

Why? What is so wrong that elicits such passion from you, Blake?

 

It's like an itch that I can't scratch. That code keeps showing up, people keep having problems with it, and there's nothing I can do about it from happening again.

Share this post


Link to post
Share on other sites
6 minutes ago, OSUblake said:

and there's nothing I can do about it from happening again.

 

You can't stop it from happening, true.

 

You can, however, write a blog post explaining why that's not optimal, refer people to it, became a web-celebrity and rake millions from it in a pyramid scheme.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.