Как добавить ослабление движения параллакса?
-
21-12-2019 - |
Вопрос
Я применяю эффект параллакса на некоторые изображения, и я хотел бы применить их смягчение.Логика параллакса довольно проста, я вычисляю расстояние, которое изображение находится из центра окна и выражает это как коэффициент 1, в котором 0 - середина экрана, а 1 - это дно.Я мог бы также применить это к верхней половине экрана, так что -1 будет топ.
В идеале я хотел бы просто подключить некоторые функции отсюда ( http://gsgd.co.uk/sandbox/jquery / gense/jquery.gess.1.3.js ) прямо в. Так предполагая, что я хочу использовать «легкость»:
// 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.
Решение
выяснил это сам.Не публикуя весь мой код, вот суть этого:
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);
.