Calculate rotation and translation of position based on window scroll value

There are two ways to get this. I will try to explain how in detail.

Scenario 1: Simple way as in the question.

Scenario 2: an arbitrary hard path.

Scenario 1: In this case, you can use a simple formula. Let go y = -x^2

. This will give a parabola that has the same shape as the path in the question. Here are the steps for what to do next (we're assuming your scroll element is a body tag, and I'm assuming you have jquery):

• Get the "y" value of the body using the following code:

  var y = $("body").scrollTop();
  
  

• Plug this value into your formula. I will give 3 examples where y is 0, 100 and 225 respectively.

  //y=0 0 = -x^2 -x = sqrt(0) x = +/- 0
  
  

  So if we are scrolling and we are at the top of the page, then x will be zero.

  //y=100 100 = -x^2 -x = sqrt(100) x = +/- 10
  
  

  The equation gives x as positive negative x, but we only want positive, so be sure to get the result of Math.abs ().

  //y=225 225= -x^2 -x = sqrt(225) x = +/- 15
  
  

  From this you can see that the further we scroll down, the more the object moves to the right.

• Now set the "left" css of your object to the calculated value. This should be sufficient for this method.

Scenario 2 For more complex paths (or even random paths), you should rather put the x values ​​into the array ahead of time. Let's say you randomly generate an array and you get the following x values:

var xvals = [0, 0.5, 1, 0.5, 0];

      

        
        
        
      

    

We use the normalized x values ​​to calculate the position later, regardless of the screen size. This particular series of values ​​will cause the object to zigzag across the screen from left to right and then back to left.

The next step is to determine where our scroll position is relative to the overall scrollability. Let's say our page is 1000px high. So if the scoll position is at zero then x = 0. If scroll = 500 then x = screenWidth. If scroll = 250 then x = 0.5 * screenWidth

etc.

In this example, I will not multiply the screen width for simplicity. But given the value of x, this should be simple.

The first thing you might want to get right now is the lerping function. There are many code examples and so on, so I trust this part to you. It's basically a function that looks like this:

function lerp(from, to, prog);

      

        
        
        
      

    

Where and with whatever values ​​you can imagine, and prog is a value between 0 and 1. If it is between 100 and 200, a value of 0.5 will yield an income of 150.

So from this we continue:

• Get scroll value as normalized value

  // scrollval = 200 var totalScroll = 1000; var normScroll = scrollval/totalScroll; // answer is 0.2
  
  

• Before we get to lerp, we first need to get the x values ​​for lerp from and to. To do this, we have to do something like lerping to get the correct index for the xvals array:

  // normScroll = 0.2 var len = xvals.length; // 5 var indexMax = Math.ceil((len-1) * normScroll); // index = 1 var indexMin = Math.floor((len-1) * normScroll); // index = 0
  
  

  We now know the 2 x values ​​we need to tie between them. They xvals[0]
  
  , which are equal to 0 and xvals[1]
  
  which are equal to 0.5;

• But this is still not enough. We also need the exact meaning of "program":

  // We continue from the x indeces scrollRange.x = totalScroll / len * indexMin; // 0 scrollRange.y = totalScroll / len * indexMax; // 250 var lerpingvalue = (scrollVal - scrollRange.x) / (scrollRange.y - scrollRange.x);// 0.8
  
  

  We now have everything we need. We now know that we need a value between xvals[0]
  
  and xvals[1]
  
  and that this value is 80% between these two values.

• So finally we linger:

  var finalX = lerp(xvals[0], xvals[1], lerpingvalue);// 0.4
  
  

• We now know that the x coordinate is 0.4 times the total screen size.

• Run these calculations on every scroll event and you should be on your way.

Hope this was clear enough. If you try to try and can't get the results and can show you how hard you tried, I'll gladly write a complete index.html sample that you can work with. Good luck!

EDIT: I made a mistake while calculating the lerpingval. Fixed.