javascripteasingeasing-functions

How to add easing to parallax movement?


I am applying a parallax effect to some images and I would like to apply easing to them. The logic of the parallax is quite simple, I am calculating the distance the image is from the center of the window and expressing this as a factor of 1 whereby 0 is the middle of the screen and 1 is the bottom. I might also apply this to the top half of the screen so -1 would be the top.

Ideally, I'd like to just plug some of the functions from here (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) straight in. So assuming I wish to use 'easeOutSine':

// t: current time, b: begInnIng value, c: change In value, d: duration function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }

What values do I pass in? I think the least obvious is d (duration) as these aren't duration-based animations. Are these equations even suitable?

Note: I don't want to use any libraries, this is pure JS.


Solution

  • Figured this out myself. Without posting all of my code, here is the gist of it:

    function easeInQuart(t, b, c, d) {
      return c*(t/=d)*t*t*t + b;
    }
    
    var deltaY // The distance the element is from the bottom of
               // the screen expressed as a factor of 1
    
    var origY // The original position
    var distanceY // The distance it can move
    var y = easeInQuart(deltaY, origY, distanceY, 1);