0

I have a situation where I need to output some code that simultaneously zooms a div from 0 to it's "final" size whilst moving it down from the top of the screen.

The x and y final sizes could be different every time but my code WILL know them (the div will contain a user-supplied image so I can just read the image size).

Now, I can do the code to "zoom" the div and also move it down the screen. I know how to find the y-center of the browser window etc...

I am moving it down the screen by adding "yvalue" to the topMargin.

Here is where I am stuck and I guess it is more of a math question rather than code??

Q: How do I calculate what "yvalue" (the y position increment) should be so that the div arrives in the center of the screen at the same time (roughly) that the div zooms to maximum size. Also I need to find out what the corresponding div_xvalue and div_yvalue should be to make the "zoom" happen at the same time (if that makes sense)

Please assume the following variables :

yvalue = increment to add to div topMargin each iteration
zoom_x_final =  final width of div
zoom_y_final =  final height of div
browser_center_y = center position of browser window (y direction)
x = current x size of div
y = current y size of div
div_xvalue = value to add to x for increasing div size per iteration
div_yvalue = value to add to y for increasing div size per iteration
stop_y = center screen position stop for slide down calc'd from    browser_center_y-(zoom_y_final/2)
Chris Jones
  • 405
  • 1
  • 6
  • 17

1 Answers1

0

I think this might help you.

I have tried to find y_increment_per_iteration and got a very simple answer:

y_increment_per_iteration 
                = [{(browser_width) or (working_area_width)} / 2 ] / zoom_y_final

Please note that this answer might not be correct as it is not tested.

Khushi
  • 1,031
  • 4
  • 24
  • 48