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.

¿Fue útil?

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); 

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top