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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.