Efecto parallax en imagenes usando la librería Javascript simpleParallax..

SimpleParallax es una librería de JavaScript muy simple y pequeña que agrega efecto parallax en imagenes .

El efecto de parallax se agrega directamente en las etiquetas de imagen, no es necesario usar imagen de fondo como la mayoría de las otras librerías parallax. Básicamente, puede agregar efectos de parallax en un sitio web de producción sin romper su diseño.

También puede optar por aplicar el efecto parallax en las etiquetas de imagen/srcset . La implementación es bastante sencilla y la animación es suave y natural.

Instalación

la instalación es muy sencilla, puede incluir el script directamente en el html.

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

O escoja una instalación via npm/yarn

//npm
npm install simple-parallax-js
//yarn
yarn add simple-parallax-js

SimpleParallax se puede importar de esta manera

import simpleParallax from 'simple-parallax-js';

Iniciando efecto

Para agregar el efecto de parallax, puede apuntar a las imágenes que desee. Por ejemplo:

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

Simplemente agregue el siguiente código de JavaScript:

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

También puede optar por aplicar el efecto parallax en varias imágenes, algo así como:

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

Casos Principales

De forma predeterminada, si no especifica ningún parámetro, simpleParallax utilizará la orientación hacia arriba . El resultado será que la imagen se desplace de abajo hacia arriba cuando se desplace hacia abajo y de arriba hacia abajo cuando se desplace hacia arriba.

Te puede interesar Creando un portfolio con jQuery.

Puede elegir entre estas orientaciones – arriba/up – derecha/right – abajo/down – izquierda/left – arriba izquierda/up left – arriba derecha/ up right – abajo izquierda/down left – abajo derecha/down right .

Si desea aplicar diferentes configuraciones en varias imágenes, no dude en iniciar varias instancias de simpleParallax. La librería agregará automáticamente las nuevas instancias en el mismo bucle 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 Ajustes

El efecto de parallax 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 más alta sea la escala, más rápido y más visible será el efecto de parallax.

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

overflow es otro ajuste interesante de desbordamiento de img. El desbordamiento se establece en falso por defecto. Si se establece en verdadero , la imagen se trasladará fuera de su flujo natural.

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

DEMOSTRACIÓN



Relacionado