ideactiva-simple-parallax

Uno de los plugins más vistosos que hay en internet y encantan a los visitantes son los parallax en imagenes; existen muchos plugins, uno de mis favoritos es simple Parallax.

Aparte de ligero y facil de usar; se especializa en imágenes

  1. Se importa la libreria
  2. se configura el la clase en imagenes
  3. se inicializa el plugin
  4. El efecto esta listo.

Dependiendo de como esta hecha tu web el codigo puede variar, pero en esencia es:

Codigo para invocar el plugin (ovio… antes de cerrar tu body )

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

Codigo html para las imagenes cada imagen que tendrá el efecto // se agrega la clase thumbnail ( puede ser cualquier otra )

<img class="img-fluid thumbnail" src="image.jpg">

El codigo Javascript para inicializar el plugin // pon este codigo despues de la invocacion del plugin

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);
Para todas las imagenes:
var images = document.querySelectorAll('img');
new simpleParallax(images);

Te diste cuenta… thumbnail en la clase de la imagen y thumbnail en el codigo javascript para inicializar el plugin de efecto parallax en imagenes

Puedes encontrar informacion más completa del plugin en la pagina oficial

https://simpleparallax.com/

por g.mtz