6
$\begingroup$

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)

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

Picture 1

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:

Picture 2

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.

$\endgroup$
  • $\begingroup$ Thanks for the improvements upon my question @ioness99a $\endgroup$ – Jesse van der Pluijm Mar 28 '17 at 13:36
2
$\begingroup$

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.

$\endgroup$
  • $\begingroup$ In this equation X = the amount of pixels scrolled and y = the amount of pixels I need to move my element from the left? Is that correct? $\endgroup$ – Jesse van der Pluijm Mar 28 '17 at 13:54
  • $\begingroup$ Could you provide an example where you solve the equation? Just so I have a kind of "step by step" guide of how to solve this? I'm afraid I'm not all that good at maths and I might mess up. For example take a screen size of 1000x500. (or Xmax = 1000, Ymin = -250 and Ymax= 250) $\endgroup$ – Jesse van der Pluijm Mar 28 '17 at 14:02
  • $\begingroup$ Good clarifying question - see my edits. $\endgroup$ – Ethan Bolker Mar 28 '17 at 14:08
  • $\begingroup$ I'm sorry. It feels kind of stupid to ask but I'm afraid I don't really follow entirely. (I'm not used to doing maths in english). Could you please take some example inputs and help me understand what end function should be? Solve the things step by step. (like in the math answer sheets kinda) $\endgroup$ – Jesse van der Pluijm Mar 28 '17 at 14:19
  • $\begingroup$ Does the object move across the screen by itself in the background or does the user control the position with the mouse? I think the former. $\endgroup$ – Ethan Bolker Mar 28 '17 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.