Jump to content
Search Community

Automatically scroll the window when the mouse approaches the viewport edge

Yunus Emre test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello!

I have a function to scroll the screen based on mouse movements. But it is already moving the entire page until mouse reach the screen edges.

I want to not move entire page to end to end but little bit. So I changed the mapRange values and have this:

See the Pen jOaoJRr?editors=1010 by ynsmrsk (@ynsmrsk) on CodePen

Beside this, I need to automatically scroll page both horizontally and vertically when the mouse get close enough to viewport edges. Here is an example site.

How can I do this?

 

See the Pen QWORMMM by ynsmrsk (@ynsmrsk) on CodePen

Link to comment
Share on other sites

Hi Yunus,

 

That animation looks pretty complex, but I'm curious, so I'm going to attempt to build in this thread. 😃

 

There's probably some game concepts that could apply here. For example, the movement is just like a camera in a game. If you move down 100px, then you would move the world up 100px.

 

That's all this demo is doing.

 

See the Pen LYYJNmQ by osublake (@osublake) on CodePen

 

To start, I'm going to build a mouse controller to behave kind of like an analog joystick. The only difference is that we want a deadzone in the middle where no movement will register.

 

If the mouse is inside the red circle, I'm going to ignore it, but if its' inside the green circle, I want get a magnitude of how far away from the center it is. Later on I will use the magnitude and angle to determine the speed and direction to move the world. Think of the magnitude kind of like a multiplier. If it's 0, there will be no movement. If it's 1, then it's going to move at full speed.

 

See the Pen bGYPBmj by GreenSock (@GreenSock) on CodePen

 

I'll be back later with more updates. 

 

  • Like 7
Link to comment
Share on other sites

16 hours ago, mikel said:

 

Such concepts are a tremendous playground.
Hey BLAKE, I tried it step-by-step or better edge-by-edge.
Complicated calculations are just not my thing.
Therefore: The GSAP utils.mapRange() is a really powerful tool.

 

 

 

 

It's so much fun...

Mikel

 

 

There is one thing I need to solve: I'll need to interact with the elements in the page but top-bottom-chill zones makes elements uninteractive under them because of the z-index values. How can I handle this?

Link to comment
Share on other sites

  • Solution
6 hours ago, Yunus Emre said:

There is one thing I need to solve: I'll need to interact with the elements in the page but top-bottom-chill zones makes elements uninteractive under them because of the z-index values. How can I handle this?

 

Another update. I'm thinking in the next update, I think I'm going to do infinite scrolling and parallax.

 

See the Pen popzeJJ by GreenSock (@GreenSock) on CodePen

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

8 hours ago, mikel said:

There is no need for the three divs.
The entire viewport is clickable - test it.

Thanks a lot Mikel! You are very helpful.

 

8 hours ago, OSUblake said:

I'm thinking in the next update, I think I'm going to do infinite scrolling and parallax.

This is complex yet smooth and awesome. @mikel's and this codepen more than enough but can't wait for the next update :D. 

Link to comment
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.
×
×
  • Create New...