Question

I’m trying to recreate a javascript version of the site http://www.zahia.com which is in flash.

Currently I’ve already done up the basic layout, which is a simple horizontal container containing divs. You can see the code here http://pastebin.com/U3z2aJve

I’m thinking to set a handler for mousemove event, but I’m not sure how to do the math behind the container’s left position in relation to the mouse’s x position for the scrolling part.

Can you guide me on the math part?

Answer 1

You need to figure out the %age that the mouse has moved across the screen, then take the same %age of the width of the container and move the container that distance.

For example, assume the screen is 100px wide and the container is 300px wide.
For every pixel we move the mouse from the left edge of the screen, we will need to move the container 3 pixels to the left.

With this, the container will move entirely off the left edge of the screen so we need to adjust for the width of the screen. So we end up with the following pseudocode.

var range = containerWidth - screenWidth; // 200px

// assume the mouse is at 10px from left
var dx = mousePercentageFromLeftEdgeOfScreen(); // dx = 0.1;
var movement = range * dx; // movement = 200 * 0.1 = 20px

// move the container to the left, hence the negative value
setContainerPosition(-movement);