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.
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);