Event for pulling an image out of a certain area and revert from the other side of the screen

[crous]

Hi

 

I'm quite new in jQuery and JavaScript and like to know how the attached event works. You can also check on the following website - pull the image to the left or to the right till it goes automatically further and change it's format and content.

 

http://agencysurvivalkits.com/

 

I don't understand how the image "The Survival Kit" leaves the screen after pulling it over a certain point to the left or the right and revert to the original place (middle of the screen).

 

Someone can help me? Mouseover or Mouesout doesn't help much.

 

Thomas

MoovingSideways.pdf

[Ingolme]

It's a programming problem that involves math. It's really complicated for somebody who is not experienced in programming.

 

We have access to the width of the screen using the offsetWidth of the body element. We have the position of the left side of the box and width of the box using offsetLeft and offsetWidth of that element. These values are numbers with which we can operate mathematically.

 

We determine where the center of the box is by adding half the width to its current left position.

 

Using a mousedown event we attach a mousemove event to the document. The mousemove event would be removed after the mouse button is released.

The mousemove event will make the box move using the mouse's current and previous position, then it will compare the position of the box with the edges of the screen. If the position of the box is less than a certain amount from the edges of the screen (maybe 200 pixels) we call a function that makes the box move out of the screen. That function would use a setTimeout or setInterval to animate the box moving.

 

Easing of the movement would have to be done by changing the distance moved on each animation frame in proportion to the distance which can be done mathematically in many ways.

 

When the box is out of the screen its position tells us which side it left from, so we move it to the opposite side of the screen and use the same animation techniques to get it back to the center.

[crous]

Hi Ingolme

 

Thank you very much for the explanation and the description of the complexity!

 

I might try first each function by itself and go further step by step.

 

If I have problems in one of the functions, shell I open an new topic (if in the forum doesn't already exist something similar) or can I continue tipping here?

 

Thomas