MaxSixth

Create a parallax effect of two images by moving the mouser horizontally equal to the GitHub site when the error 404 page not found

Recommended Posts

Well, first you have to track the mouse and get its x and y.

You then create some graphics and lay them on top of each other. Let's call them A, B, and C.

A moves the most when you move the mouse, probably a ratio like -0.7 * x. That means it'll move in the opposite direction of the mouse, but not by as much. B moves the least, maybe -0.2 * x. C moves maybe 0.4 * x, so it looks like everything pivots on a point near B somehow.

You'll have to play with this and probably offset it from the center of the graphics, but that's the gist.

Share this post


Link to post
Share on other sites
On 13/05/2016 at 11:53 AM, drhayes said:

Well, first you have to track the mouse and get its x and y.

You then create some graphics and lay them on top of each other. Let's call them A, B, and C.

A moves the most when you move the mouse, probably a ratio like -0.7 * x. That means it'll move in the opposite direction of the mouse, but not by as much. B moves the least, maybe -0.2 * x. C moves maybe 0.4 * x, so it looks like everything pivots on a point near B somehow.

You'll have to play with this and probably offset it from the center of the graphics, but that's the gist.

That was my doubts even thank you! now I understand how it works this logic. So the secret is just taking control of the mouse and so apply this logic?

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.