Как добавить смягчение к движению параллакса?

Я применяю эффект параллакса к некоторым изображениям и хочу применить к ним смягчение. Логика параллакса довольно проста: я вычисляю расстояние от изображения до центра окна и выражаю его как коэффициент 1, где 0 — середина экрана, а 1 — низ. Я мог бы также применить это к верхней половине экрана, чтобы -1 было верхом.

В идеале я хотел бы просто подключить некоторые функции отсюда (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) прямо. Предположим, я хочу использовать '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; }

Какие значения я передаю? Я думаю, что наименее очевидным является d (длительность), поскольку это не анимация, основанная на длительности. Эти уравнения вообще подходят?

Примечание. Я не хочу использовать какие-либо библиотеки, это чистый JS.


javascript easing easing-functions
person hamishtaplin    schedule 31.07.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Разобрался с этим сам. Не публикуя весь мой код, вот его суть:

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);
person hamishtaplin    schedule 31.07.2014