Scaling text relative to position in browser window.

Question

I'm currently stuck on a little bit of math for my project. I'm trying to scale a div in my page based on how close it is to the center of the browser window, so when it is in the center of the window it is full size, but as you scroll down or up it scales down as if to disappear. I'm just struggling on how to calculate this value.

Thanks in advanced, Harry.

Answer 1

let x and y be the position of your div relative to the browser window

window.innerHeight and window.innerWidth will give you the current visible window height and width.

var w = window.innerWidth;
var h = window.innerHeight;

The center would be

var center = (w/2, h/2);

the distance from the center is:

var distance = Math.sqrt((w/2 - x)*(w/2 - x), (h/2 - y)*(h/2 - y));

Now you want to scale the div so that it's maximum size when its distance from the center is 0 and smaller when it's further away.

The simplest thing to do is to use a width of w - distance and a height of h - distance . That will give you a linear scale, you can use other scaling functions as well, but I'll leave that to you to play with for now. :)