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