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).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body
{
height:100%;
font-family: sans-serif;
font-size: 16px;
}
body{
background: url("/como_se_hace/imgs/parallax0.jpg") repeat-y fixed;
}
main{
display:flex;
flex-direction:column;
justify-content:start;
align-items:center;
color: black;
font-size: 2rem;
width:60%;
margin:0 auto;
}
</style>
</head>
<body>
<main>
<div>
<h1>Parallax super simple</h1>
</div>
<h2>¡Este parallax solo usa HTML y CSS!</h2>
<div >Sed ultrices vitae nulla vitae volutpat. Etiam feugiat, quam sit amet accumsan dictum, justo felis luctus nulla, at feugiat magna est vitae mauris. Etiam tempus, nibh quis tincidunt laoreet, mauris massa lobortis nisi, a consectetur dui nibh in lacus. Vestibulum malesuada metus tellus. Mauris fringilla sollicitudin mauris interdum viverra. Nam auctor viverra felis non tincidunt. Phasellus fringilla sodales tortor, vitae venenatis nulla finibus nec. Cras elementum, massa hendrerit varius hendrerit, magna nibh commodo velit, a interdum massa nulla viverra enim. Nam facilisis vel turpis vel blandit. Nulla sagittis hendrerit metus vitae condimentum. Phasellus quam tortor, tempor nec gravida non, pretium nec odio. Phasellus ac mauris et magna viverra scelerisque a vitae ex. Fusce felis turpis, congue sit amet blandit nec, iaculis ullamcorper tortor. Proin molestie augue vel mauris porta ultrices. Donec ut lacus eget metus maximus porta a et dui. Nulla at mi nibh.</div>
<div>Sed ultrices vitae nulla vitae volutpat. Etiam feugiat, quam sit amet accumsan dictum, justo felis luctus nulla, at feugiat magna est vitae mauris. Etiam tempus, nibh quis tincidunt laoreet, mauris massa lobortis nisi, a consectetur dui nibh in lacus. Vestibulum malesuada metus tellus. Mauris fringilla sollicitudin mauris interdum viverra. Nam auctor viverra felis non tincidunt. Phasellus fringilla sodales tortor, vitae venenatis nulla finibus nec. Cras elementum, massa hendrerit varius hendrerit, magna nibh commodo velit, a interdum massa nulla viverra enim. Nam facilisis vel turpis vel blandit. Nulla sagittis hendrerit metus vitae condimentum. Phasellus quam tortor, tempor nec gravida non, pretium nec odio. Phasellus ac mauris et magna viverra scelerisque a vitae ex. Fusce felis turpis, congue sit amet blandit nec, iaculis ullamcorper tortor. Proin molestie augue vel mauris porta ultrices. Donec ut lacus eget metus maximus porta a et dui. Nulla at mi nibh.</div>
</main>
</body>
</html>
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.