Cómo implementar una animación con imágenes usando el scroll con jQuery

Ahora que estuve viendo el review de GTA V en Polygon vi que los chicos del sitio implementaron un curioso efecto de animación mientras el scroll bajaba en donde se podía ver una secuencia de imágenes del videojuego. Me pareció un efecto bastante interesante porque además de añadirle más interacción a su artículo realmente no implementaron una funcionalidad completa, ya que el script que ellos hicieron hace que las imágenes se tengan que cargar cada vez que se cambia el scroll, y eso es mucha petición al servidor.

En este tutorial vamos a implementar una animación con imágenes usando el scroll con jQuery, un efecto que parte de todo lo que viene a ser efecto Parallax pero de forma mucho más sencilla. Verán que al final la implementación se resume a una sola línea de código, haciéndolo más eficiente para que se detenga cuando el scroll llegó a cierto límite.

Demo del tutorial

HTML

Para este tutorial lo que necesitamos son todas las imágenes cargadas desde el principio, ya que una vez que estén ahí es mucho más fácil ocultarlas y mostrar la imagen que sigue, a tener que calcular la imagen que sigue y mandarla a llamar desde el servidor,  ya que esta última técnica es lo más ineficiente.

Ponemos una capa extra para ponerle un texto decorativo pero puede omitirse esta parte.

CSS

Para nuestro CSS tampoco hay mucho trabajo. Como estamos mostrando y ocultando imágenes es importante que el contenedor no se cambie de tamaño en ese lapso donde no hay nada y de repente se carga la imagen, por eso es importante saber el tamaño de las imágenes para que el contenedor sea del mismo tamaño. Lo demás es ocultar las imágenes, mostrar la primera, y darle un poco de estilo a nuestra capa que tiene el texto.

Javascript

Usando la función de scroll en nuestro objeto window podemos obtener la posición del scroll.  Lo que hacemos cada vez que se mueve el scroll es ocultar las imágenes y mostrar la imagen de acuerdo al valor que devuelve el scroll, solo que lo normalicé un poco para que mostrara una imagen por cada 10 pixeles que avanza o regresa el scroll, de lo contrario iría muy rápido. Por último le aplico la operación de módulo para que siempre muestre una imagen en un intervalo de 0 a 39.