javascript - Complex mathematical horizontal parallax easing function -

i'm diving parallax effects on web.

parallax scrolling technique in computer graphics , web design, background images move camera slower foreground images, creating illusion of depth in 2d scene , adding immersion. ~ wikipedia

i want create little container (could image, or block level element) , move across screen horizontally user scrolls.

the effect should scalable across viewports. meaning hight , width of element element moving across should not matter.

when user has scrolled half of height of screen "moving element" should in exact center. since user have scrolled half of screen element vertically already. we're worried horizontally right now.

i've thought question while , came pretty idea of how.

---

1. take hight , width of element want "moving element" move across. example screen 1000px tall , 600px wide.

2. divide width height. example (600px / 1000px = 3/5 = 0.6)

3. take amount of pixels user scrolled , multiply number created. example (500px * 0.6 = 300px). can see exact center.

4. move element across screen amount of pixels calculated.

---

this calculation works fine every screen size, it's linear. meaning element move @ same speed across screen time. let me show mean.

---

1. let's draw out screen size. (let's 1000 * 500)
2. calculate 2 points graph ->

screen factor: (500 / 1000) = 0.5 1. first point going easy. let's scrolled 0px -> (0.5 * 0) = 0 "moving element" not have moved @ all. 2. second element we'll take center. convenience.

the vertical center @ 500px -> (0.5 * 500) = 250 px (exactly horizontal center)

3. put results in graph , draw line through points.

in graph above can see whenever user scrolls down "moving element" follow line (the values on x-axis).

my question

i hope described enough understand. on question.

what want create moving element go faster on edge of screen , slow down bit in middle. if draw out in same way did. (creating graph can take amount of pixels scrolled , see element should positioned horizontally) this:

sorry poor quality of image part i'm having problems with.

as can see in graph "moving element" wouldn't moving in middle of graph. (i on did bit in drawing general idea.)

what need mathematical function takes 3 parameters (screen height, width , amount of pixels scrolled) , returns horizontal position of "moving element".

---

my idea:

my idea position element in dead center of page , move left , right (translations using css , javascript) based on how far there has been scrolled.

the graph this:

the (hand drawn) graph above true screen that's 1000x600px since "moving element" translates -300px when no scrolling has been done , 300px when 100% has been scrolled.

however have no idea on how create mathematical function true every screen size.

to clear need function "always" starts @ y= (-screen-width/2) , x = 0. should cross point (sreen-height; (screen-width//2)) , function should in form of x^3 (to right easing)

---

i hope explained myself enough , hope can me out here.

you can position function f draws trajectory.

this idea propose:

1. create function trajectory f such f(0) = 0, , f(1) = 1 (add more constraints in order reproduce effect looking for, ex: f(0.5) = 0.5)
2. within each scroll event, set x amount scrolled , position element using coordinates (f(x) * (w - s), x * (h - s)), w document width, h document height , s size of element

i can see cubic functions plotted trajectory want, i've been testing different functions , i've got working example https://codepen.io/anon/pen/yzjxga

var element = $('.element') var height = $(document).height() var scrollable = $('body').height() - $(window).height() var width = $('body').width();  $(window).scroll(function () {   var winh = $(window).scrolltop()   var x;    // determine amount of px scrolled since element first came view.   console.log(winh, scrollable)   x = (winh/scrollable) > 1 ? 1 : (winh/scrollable);    var posy = x * (height - 120);   var posx = (-1.000800320128*x +6.0024009603841*x**2-4.0016006402561*x**3)*(width - 120)    console.log(posy)    if (x > 0) {      console.log(`translate(${posx}px, ${posy}px, 0)`)     element.css({       'transform': `translate3d(${posx}px, ${posy}px, 0)`       })   } }) 

you can generate more cubic functions using tool i've found http://skisickness.com/2010/04/28/ or solve couple of systems of linear equations using fact want find values a, b, c , d f(x) = ax^3 + bx^2 + cx + d