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

Я применяю эффект параллакса к некоторым изображениям, и я хотел бы применить смягчение к ним. Логика параллакса довольно проста, я вычисляю расстояние, на котором изображение находится от центра окна, и выражаю его как коэффициент 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.

1 ответ

Решение

Сам разобрался. Без публикации всего моего кода, вот суть этого:

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); 
Другие вопросы по тегам