Desplazamiento con efecto parallax en la versión 7.0

Última actualización: 23 de agosto de 2024

Revisa la configuración del efecto parallax y consejos para la solución de problemas.

Las plantillas de la familia Brine usan un efecto gráfico especial en las imágenes del encabezado que se conoce como "desplazamiento en paralelo". El desplazamiento en paralelo consiste en una imagen de fondo que se mueve más lentamente que el contenido que está en el frente, lo que crea una ilusión de profundidad e inmersión.

Consejo

Para producir un efecto parallax similar en la versión 7.1, usa efectos de imagen de fondo.

Este es un ejemplo de desplazamiento en paralelo en la plantilla Burke:

parallax_scroll_download.gif

Antes de comenzar

Páginas compatibles

El desplazamiento en paralelo está disponible en las páginas que admiten banners:

  • Páginas de índice (imágenes de fondo detrás de las secciones de páginas de diseño)
  • Páginas de Diseño
  • Páginas de la tienda
  • Páginas de eventos
  • Páginas de Álbum
  • Páginas de blog
  • Páginas de Galería

Habilitar o deshabilitar el desplazamiento en paralelo

Si los banners de tu sitio no muestran el efecto de desplazamiento en paralelo, habilítalo en los estilos del sitio de la familia Brine:

  1. Abre el panel Estilos del sitio.
  2. Desplázate hasta la sección Principal: Superposición.
  3. Marca Activar efecto parallax.
  4. También recomendamos marcar Recorte inteligente del efecto parallax para minimizar los recortes.
  5. Haz clic en Guardar

Para deshabilitar el efecto parallax de tu sitio, sigue los mismos pasos, pero desmarca Activar efecto parallax.

Agregar imágenes destacadas

Para crear el efecto parallax, agrega una imagen destacada a tu página o sección:

Si el efecto parallax no aparece, verifica que esté habilitado.

Destaca el efecto

Hay varios modos para destacar el efecto del desplazamiento en paralelo.

Mezclar contenidos

Mezcla imágenes del desplazamiento en paralelo con contenidos e imágenes que no se desplazan en paralelo. El contenido que se mueve más rápido aparenta desplazarse sobre las imágenes que se desplazan en paralelo.

Por ejemplo, en un Índice puedes combinar secciones de contenido con desplazamiento en paralelo y secciones de galería que no tienen este efecto o secciones de contenidos sin imágenes de fondo.

Añadir contenidos en la superposición

Otro modo de destacar el efecto parallax es añadir texto, botones u otros contenidos a una imagen como una superposición. Este contenido se desplaza con la misma velocidad que el resto de la página, más rápidamente que la imagen. En la familia Brine, puedes agregar este contenido con bloques:

Añadir un filtro de color

Puedes añadir un filtro de color a todos los banners de tu sitio con Color de superposición en la sección Principal: Superposición de estilos del sitio.

Recortar

Para comprender cómo el recorte afecta a las imágenes con desplazamiento paralelo, ayuda pensar en tu sitio como una hoja de papel con un rectángulo recortado en ella. La imagen que se desplaza en paralelo es una capa separada e inferior, que solo se puede ver a través del agujero del papel.

Para que el papel se desplace más rápidamente que la imagen, la imagen debe ser más alta que el agujero. El espacio adicional arriba y abajo de la imagen es lo que se revela cuando mueves el papel hacia arriba y hacia abajo.

Debido a esto, los cambios en el recorte y en el punto focal tal vez no tengan un impacto notable sobre la posición de una imagen con desplazamiento en paralelo. Tu sitio ha sido diseñado de manera tal que comprobar que la imagen tenga márgenes a los lados para poder mostrar el efecto del desplazamiento en paralelo.

Consejo

Marca Recorte inteligente del efecto parallax en los estilos del sitio para minimizar el recorte a la izquierda y a la derecha.

Problemas con el desplazamiento

Si se producen problemas de desplazamiento cuando el efecto parallax está habilitado, es posible que debas reducir el tamaño de la página. Los navegadores pueden cargar lento las páginas con efecto parallax, especialmente si el tamaño total de la página es de 15 MB o más. Si el desplazamiento sigue sin verse bien, o si reducir el tamaño de la página no es una opción para ti, considere deshabilita el efecto parallax

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Desplazamiento con efecto parallax en la versión 7.0