logo

La forma más fácil de crear desplazamiento de paralaje con simpleParallax

SimpleParallax es una biblioteca de JavaScript muy simple y pequeña que agrega animaciones de paralaje en cualquier imagen.

El efecto de paralaje se agrega directamente en las etiquetas de imagen, no hay necesidad de usar una imagen de fondo como lo hacen la mayoría de las otras bibliotecas de paralaje. Básicamente, puede agregar efectos de paralaje en un sitio web de producción sin romper su diseño.

También puede optar por aplicar el paralaje en etiquetas de imágenes/imágenes srcset. La implementación es bastante sencilla y la animación es fluida y natural.

Instalación

La instalación es muy sencilla. Puede optar por incluir el script directamente en su HTML:

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

O elija instalarlo a través de npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

Una vez que lo haya instalado a través de un administrador de paquetes, puede importarlo de la siguiente manera:

import simpleParallax from 'simple-parallax-js';

Inicialización

Para agregar el efecto de paralaje, puede apuntar a cualquier imagen que desee. Por ejemplo:

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

Simplemente agregue el siguiente código JavaScript:

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

También puede optar por aplicar el paralaje en varias imágenes, algo como:

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

Casos principales

De forma predeterminada, si no especifica ningún parámetro, simpleParallax usará el arriba orientación. Dará como resultado que la imagen se traduzca de abajo hacia arriba al desplazarse hacia abajo y de arriba hacia abajo al desplazarse hacia arriba.

Puede elegir entre estas orientaciones - hacia arriba - correcto - abajo - izquierda - arriba a la izquierda - arriba a la derecha - abajo a la izquierda - abajo a la derecha .

Si desea aplicar diferentes configuraciones en varias imágenes, no dude en inicializar varias instancias de simpleParallax. La biblioteca agregará automáticamente las nuevas instancias en el mismo ciclo de proceso de las instancias actuales. Por lo tanto, no se 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 configuraciones

El efecto de paralaje se crea con un efecto de escala aplicado a la imagen. Este efecto de escala se puede cambiar fácilmente (el valor predeterminado es 1.3 ). Cuanto mayor sea la escala establecida, más rápido y más visible será el efecto de paralaje.

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

desbordamiento es otro escenario interesante. El desbordamiento se establece en falso por defecto. Si se establece en verdadero , la imagen se traducirá fuera de su flujo natural. 

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

Enlaces útiles

  • Github
  • Sitio web de demostración con ejemplos
  • Estudio de caso sobre Medium