SimpleParallax: la manera más sencilla de crear un efecto parallax al hacer scroll

SimpleParallax es una pequeña librería de Javascript que agrega animaciones parallax sobre cualquier imagen. Dicho efecto se añade directamente sobre el tag image, por lo que no hay necesidad de tener que utilizar el típico background-image que suelen utilizar las demás librerías que hacen esto. Básicamente, puedes agregar efectos parallax en una web en producción sin romper su diseño.

Puedes escoger entre aplicar el parallax sobre el tag de la imagen o sobre el srcset. La implementación es muy sencilla y la animación fluida y muy natural.

Instalación

La instalación es la mar de simple. Puedes elegir entre incluir el script directamente en tu HTML:

<script src="simpleParallax.js"></script>

O, por el contrario, instalarlo vía npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

Una vez esté instalado vía gestor de paquetes, puedes importarla tal que así:

import simpleParallax from 'simple-parallax-js';

Inicialización

Para añadir el efecto parallax, debes contar con una imagen (logicamente). Por ejemplo:

<img class="thumbnail" src="image.jpg" alt="image">

Ahora, simplemente añade el siguiente código Javascript.

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

Ojo, también puedes aplicar el efecto parallax a multiples imagen. Sería una cosa así:

var images = document.querySelectorAll(img);
new simpleParallax(images);

Casos de uso

Por defecto, si no especificas ningún parámetro, simpleParallax utilizará la orientación up. El resultado será que la imagen se desplazará de abajo hacia arriba cuando se hagas scroll hacia abajo y de arriba a abajo cuando hagas scroll hacia arriba.

Puede elegir entre estas orientaciones: up - right - down - left – up left – up right – down left – down right.

Si deseas aplicar diferentes configuraciones en varias imágenes, no dudes en inicializar varias instancias de simpleParallax. La librería agregará automáticamente las nuevas instancias en el mismo bucle de proceso de las instancias actuales. Es decir, no consumirá ningún rendimiento adicional.

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">

var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

Más configuración

El efecto parallax se crea con un efecto de escalado que se aplica a la imagen. Este efecto de escalado se puede cambiar de forma sencilla (el valor por defecto es 1.3).

new simpleParallax(image, { 
    scale: 2 
});

El overflow es otra configuración interesante. Por defecto está a false.

new simpleParallax(image, { 
    overflow: true 
});