Position $f(x) = x^3$ by inputting $2$ variables

Question

Before we start, I'm not sure if this question belongs here. The question is all about mathematics, however the math behind this question came from a problem I had in web design. But since it's about math I am going to put it here.

I'm currently diving into parallax effects on the web.

Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion. ~ wikipedia

In addition to just the foreground and background moving at a different pace moving elements in a different direction also has a parallax ish effect. ~ me

Basically I want to create a little container (could be an image, or any block level element) and move it across the screen horizontally as the user scrolls. This can be done with JavaScript but how is not really the point of this question.

The effect should be scalable across all viewports. Meaning that the hight and the width of the element that the element is moving across should not matter.

When the user has scrolled half of the height of the screen the "moving element" should be in the exact center. Since the user will have scrolled half of the screen the element will be vertically already. We're only worried about horizontally right now.

I've thought about this question for a while and came up with a pretty good idea of how.

---

1. Take the hight and the width of the element you want the "moving element" to move across. For example a screen that is $1000\text{px}$ tall and $600\text{px}$ wide.

2. Divide the width by the height. For example ($600\text{px} / 1000\text{px} = 3/5 = 0.6$)

3. Take the amount of pixels the user scrolled and multiply it by the number we just created. For example ($500\text{px} \times 0.6 = 300\text{px}$). As you can see this is the exact center.

4. Move the element across the screen by the amount of pixels just calculated.

---

This calculation works fine even for every screen size, however it's linear. Meaning that the element will move at the same speed across the screen all the time. Let me show you what I mean.

---

1. Let' draw out a screen size.... (Let's say $1000 \times 500$)
2. Calculate two points for this graph ->

screen factor: $(500 / 1000) = 0.5$

1. The first point is going to be easy. Let's say we scrolled exactly $0\text{px}$ -> $(0.5 \times 0) = 0$
   The "Moving element" will not have moved at all.

2. For the second element we'll take the center. Just for convenience.
   The vertical center is at $500\text{px}$ -> $(0.5 \times 500) = 250\text{px}$ (Exactly the horizontal center)

3. Put the results in a graph and draw a line through the points. (Consider the orange line)

In the graph above you can see that whenever the user scrolls down the "moving element" will follow the line (the values on the horizontal-axis).

My question

I really hope I described all that well enough to understand. Now on to my question...

What I want to create is a moving element that would go faster on the edge of the screen and slow down a bit in the middle. If we were to draw that out in the same way we just did (Creating a graph where we can take the amount of pixels scrolled and see where the element should be positioned horizontally) it would look like the blue line in the previous image.

As you can see in this graph the "moving element" wouldn't be moving all that much in the middle of the graph. (I over did it a bit in my drawing but you get the general idea.)

What I need is a mathematical function that takes three parameters (Screen height, width and the amount of pixels scrolled) and returns the horizontal position of the "moving element".

---

My idea:

My idea was to position the element in the dead center of the page and then to move it left and right (translations using css and JavaScript) based on how far there has been scrolled.

The graph would look something like this:

The (Hand drawn) graph above would be true for a screen that's $1000\times600\text{px}$ since the "moving element" translates $-300\text{px}$ when no scrolling has been done and $300\text{px}$ when $100\%$ has been scrolled.

However I have no idea on how to create a mathematical function that would be true for every screen size.

Edit from one of my comments down below:

To be clear: the user controls the position of the object by scrolling down the page. I want to take the amount of pixels that the user has scrolled down and input that number into a function. This function will then calculate the exact position at which the object should be relative to it's original position (0;0). So if the user has scrolled 0px the position should be (-0.5 * Pagewidth; 0). If the user has scrolled halfway it should be (0;0) and if it's at the end it should be (0.5 * Pagewidth; 0)

The function should "slow down" towards the center of the page.

---

I really hope I explained myself well enough and I really hope somebody can help me out here. Keep in mind that I am no expert in maths at all.

Answer 1

This is a well thought out question.

Your first picture and the comments below say that you want to compute the horizontal position of the object as a function of the amount of vertical scrolling that has taken place. It's a little confusing to use $x$ and $y$ for variables, since $y$ is the independent variable in this problem, so I'll write $w$ for horizontal position and $h$ for the the amount of scrolling. Suppose the width and height of the screen are $W$ and $H$. You want $w = 0$ when $h=0$, $w=W$ when $h= H$, symmetry about the midpoint and slower movement there. This function will do that: $$ w = \frac{4W}{H^3}\left(h - \frac{H}{2}\right)^3 + \frac{W}{2}. $$

In this model the horizontal speed decreases to $0$ at the middle of the scroll. With a somewhat more complicated function you could make it slow down but not to a complete stop for an instant before speeding up again.