Jump to content

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


MaxSixth
 Share

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.

Link to comment
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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...