Rellax.js: Crear Parallax Usando JavaScript Puro

El desplazamiento Parallax se ve increíble cuando se hace bien. No es una función que desee en todos los sitios web, pero para los sitios creativos y las landing page, los elementos de Parallax son increíbles para llamar la atención rápidamente.

Hay toneladas de bibliotecas de JavaScript gratuitas para efectos de desplazamiento animados, pero muchas están hinchadas o son demasiado complejas para algunas personas. Por eso recomiendo usar Rellax.js para sus necesidades a la hora de usar Parallax en el sitio web. Es un complemento de código abierto gratuito creado en JavaScript Puro, por lo que no tiene dependencias y problemas de incompatibilidad.

Por defecto, solo requiere una simple llamada de función para asignar la clase de Parallax a los elementos de la página. Luego, a medida que se desplaza, estos elementos permanecen fijos y se mueven junto con el punto de vista del usuario.

Puede personalizar estos elementos para que aparezcan más cerca, más lejos o detrás de los elementos de la página. Esto crea la ilusión de profundidad en la página y todo funciona a través de una simple biblioteca de JavaScript.

Todo el código fuente de Rellax está disponible de forma gratuita en GitHub si desea descargar una copia.

Toda la configuración utiliza una única función JS dirigida a la clase .rellax de la siguiente manera:

var rellax = new Rellax('.rellax');

Tenga en cuenta que puede usar prácticamente cualquier clase que desee, pero la demostración de ejemplo usa .rellax por simplicidad.

Desde aquí, simplemente envuelve los elementos de Parallax dentro de un div con la clase .rellax y establece el atributo de velocidad. Esto funciona a través del atributo personalizado data-rellax-speed que acepta valores de -10 a +10.

Aquí hay un fragmento de ejemplo del HTML en la página de demostración:

I'm extra slow and smooth

También puede centrar elementos en la página y personalizar las posiciones de los elementos mediante CSS.

Rellax no es para estructurar la página o cómo definir elementos CSS en su página. Todo lo que hace es crear un efecto de desplazamiento de Parallax natural con JavaScript puro. Cómo usas esto depende totalmente de ti. Para ver una demostración en vivo, eche un vistazo al sitio principal o navegue por el repositorio de GitHub. Esto incluye algo de documentación, junto con enlaces a sitios web en vivo que usan Rellax.js.