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
- Se importa la libreria
- se configura el la clase en imagenes
- se inicializa el plugin
- 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/