Cómo implementar el desplazamiento de parallax (paralaje)

Cómo funciona

El efecto Parallax permite cambiar la posición de una imagen en relación con otros objetos. Puede establecer un desplazamiento no convencional de su página mediante un código HTML personalizado y hacer que su sitio web sea más llamativo. Puede utilizar una solución existente o agregar su propio código.

Cómo conseguirlo

Utilizar una solución existente

1. Abra su proyecto en Cuenta del editor.
2. En la barra lateral haga clic en Site Builder.
3. Haga clic en Open Site Builder.
4. Inserte el siguiente código en el bloque Custom code:

<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

5. Para aplicar el efecto Parallax a una imagen, coloque un enlace sobre esta imagen en el atributo data-image.
6. Haga clic en Preview para ver sus cambios.

Vea el tutorial en vídeo para seguir estas instrucciones:

Agregar su propio código

1. En Builder, haga clic en Add block y seleccione Custom code.

2. Inserte su propio código en el bloque.

Enlaces útiles