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

Hi, everyone, I am new in the framework of the phaser, and I came to ask your help to know how to create a parallax effect equal to the GitHub site when it is not found the page, example here: https://github.com/errorr4frsf wanted this effect between two background images, where the last image moves contrary to the mouse movement.

Share on other sites

15 minutes ago, shohan4556 said:

That's the point  Move your mouse and see the effect.

Share on other sites

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 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?