Efecto parallax básico
El efecto parallax consiste en mostrar la página web en dos planos superpuestos, dnado idea de profundidad. Cada plano se desplaza a distinta velocidad al hacer scroll.
La idea es emular en la ventana del navegador la visión 3D en la visión normal. Cuando miramos a un paisaje con un punto de referencia a lo lejos y nos desplazamos, nuestros ojos perciben como los objetos se desalinean, los más lejanos parecen desplazarse más que los cercanos.
Haz la prueba: extiende tu brazo con el pulgar hacia arriba, cierra un ojo y fija tu vista en el pulgar y un objeto lejano. Ahora desplaza la cabeza hacia la derecha o la izquierda manteniendo la vista en el pulgar: verás como si los objetos lejanos se desplazaran, de hecho cuanto más lejos mayor parece el desplazamiento.
Igual ocurre si mantienes la vista fija en una referencia lejana, el pulgar se desalinea mientras tu referncia permanece fija.
Pues en este ejemplo te muestro como lograr este segundo efecto: algo tan sencillo como mantener el fonod fijo mientras desplazamos el primer plano haciendo scroll. Es un background parallax o parallax positivo.
Si quiere pues ahondar algo más con este otro parallax complejo formado por capas
El código.
Vamos a hacer este parallax en un solo archivo, dado lo simple de la aplicación.
Tendremos un cuerpo o body con una imagen de fondo bien grande para que ocupe toda la pantalla. Para que siga funcionando en móviles o con conenidos muy grandes pondré que se repita en vertical (repeat-y).
Este es un parallax estremadamente simple: basta con tener el fondo fijo y permitir que se mueva el bloque de contenido al hacer scroll vertical. El efecto 3D es muy simple, pero está ahí, con una capa moviéndose sobre otra.