Animate CSS value based on scrolling position

Animate CSS value based on scrolling position

Hi,
probably most of you know websites, where something is animated based on the scroll position. An example for that is the Skrollr jQuery Plugin itself, which does exactly that:  http://prinzhorn.github.io/skrollr/

The problem is that this plugin works with data attributes on HTML elements, which is great and easy to use for some purposes, but in my case i need it as a JS function (to dynamic set the starting and ending values). To give you an example here is a quick code sample i need:

  1. var
  2. $window = $(window),
  3. $el = $(".element"),
  4. scrollTop;

  6. $(window).on("scroll", function() {
  7. scrollTop = $window.scrollTop();
  9. $el.css({
  10. "translateX" : linearMovement(-300, 0, 500, 200)
  11. });
  12. });

  14. function linearMovement(startValue, endValue, startingPoint, time) {
  15. return ...;
  16. }
In this case i want to translate the elements x position from -300 (first value) to 0 (last Value). This movement should start as soon as you have scrolled more than 500px (third value) from top. This "animation" should be done after 200px (last value) of scrolling. So if you scrolled more than 700px (500px + 200px) in my case the element should stay at its end position (second value). 

The orders of parameters could be different. I am not really sure if something like this is possible, but since skrollr does it similar, but with HTML data values, it should be somehow doable. I am not really good at maths, that is why i didn't manage to do something like that before. I looked in google and different sites and the only thing i found was a jQuery Tutorial:  http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

This one isn't too bad, they use a function as well

  1. function move(p0, p1, s) {
  2. return Math.min((-p0 + p1) / s_max * s + p0, p1);
  3. }
p0 is the starting value and p1 the end value. It works, but there is no parameters for the time (in px) and starting point (in px). For me and in my tests it seems the "s" is just a magic number. A time parameter and starting Point for the animation would make it more useful in lots of cases. Especially if you need to do a website, which relies on such kind of animations.  Do any of you know if a function like mine at the top is possible and how it would look like?

Thanks in advance for your help.