El efecto de parallax al hacer scroll es alucinante cuando se hace bien. A ver, seamos claros, tampoco es una función necesaria en todos y cada uno de los sitios web que pueblan Internet, pero en landing pages y en webs creativas siempre llaman la atención de forma instantánea. Existen miles de librerías gratuitas en Internet para crear efectos basándose en el scroll del usuario, pero a menudo son demasiado complejas o cuentan con otras funciones o características que no nos son necesarias.
Es por eso por lo que te recomiendo Rellax.js. Es un plugin open source desarrollado con Javascript puro y duro, por lo que no tiene dependencias. Por defecto, solo requiere llamar a una función para asignar la clase parallax a un elemento de la página. Después, una vez el usuario haga scroll, dicho elemento permanece fijo y se mueve junto al viewport del usuario.
Puedes personalizar estos elementos para que aparezcan más cerca, más lejos o detrás de otros elementos de la página, creando así una ilusión de profundidad en la web. Por raro que te parezca, todo esto funciona con una una simple librería de JavaScript.
Todo el código fuente de Rellax está disponible de forma gratuita en GitHub, por si deseas descargar una copia.
Todo lo que necesitas conocer en cuanto a configuración se refiere es una única función, la función Rellax.
var rellax = new Rellax('.rellax');
Ojo, puedes utilizar prácticamente la clase que desees, pero para este ejemplo hemos utilizado la clase .rellax por simplicidad.
Ahora, solo tienes que meter dentro los elementos a los que quieres dar un efecto parallax dentro de un div con la clase .rellax y definir el atributo de velocidad. Esto funciona a través del atributo personalizado data-rellax-speed que acepta valores de -10 a +10.
Aquí tienes un pequeño ejemplo sobre cómo utilizar esto que acabamos de comentar:
<div class="rellax" data-rellax-speed="-7"> Soy super lento y fluido </div>
También puedes centrar elementos en la página y personalizar las posiciones de los elementos mediante CSS.
Rellax no te dice cómo estructurar la página o cómo definir elementos CSS en tu web. Todo lo que hace es crear un efecto parallax natural al hacer scroll con JavaScript puro. Cómo lo uses depende totalmente de ti.
Para ver una demo en vivo de Rellax, échale un vistazo a su web oficial o bien a su repositorio de GitHub. En el repo puedes ver una pequeña documentación, junto con enlaces a sitios web de ejemplo que utilizan Rellax.js.
Y lo mejor de todo es que el equipo está totalmente dispuesto a mejorar la librería, por lo que si notas algún problema o te gustaría dar alguna sugerencias sobre funciones o características, simplemente envía un mensaje rápido al equipo.