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

1. Abra su proyecto en Cuenta del editor y vaya a Storefronts > Websites.
2. En la sección Sites, seleccione su sitio web y haga clic en Open Site Builder.
3. Si su sitio tiene varias páginas, seleccione la que necesite:
   1. Haga clic en el título de la página actual, situado en la parte superior del creador.
   2. Seleccione la página que necesita de la lista desplegable.
4. Desde cualquier punto de la página, haga clic en Add block.
5. Seleccione el bloque Custom code.
6. Añada el código HTML con el script del efecto de una de las siguientes dos formas:
   • Usando su propio código.
   • Usando el script ya creado. Para ello:
     1. Introduzca el siguiente código en el bloque:

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

1. 1. 2. Para aplicar el efecto Parallax a una imagen, incluya un enlace a esta imagen en el atributo data-image.

7. Haga clic en Preview para ver los cambios.

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

Enlaces útiles