¿Cómo agregar facilitar el movimiento de paralaje?
-
21-12-2019 - |
Pregunta
Estoy aplicando un efecto de paralaje a algunas imágenes y me gustaría aplicarles facilitándolos.La lógica de la paralaje es bastante simple, estoy calculando la distancia que la imagen es del centro de la ventana y expresando esto como un factor de 1, por lo que 0 es el centro de la pantalla y 1 es la parte inferior.También podría aplicar esto a la mitad superior de la pantalla, así que -1 sería la parte superior.
Idealmente, me gustaría simplemente conectar algunas de las funciones desde aquí ( http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js ) recto. Así que suponiendo que deseo usar 'Eassoutsine':
// 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;
}
¿Qué valores paso?Creo que lo menos obvio es D (Duración), ya que estas animaciones no están basadas en la duración.¿Estas ecuaciones incluso son adecuadas?
NOTA: No quiero usar ninguna biblioteca, esto es puro JS.
Solución
Me dijeron esto a mí mismo.Sin publicar todo mi código, aquí está la esencia de ella:
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);