Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Animaciones y efectos de imagen

Puedes agregar animaciones a un área pequeña del sitio, como un fondo de sección o un bloque de imagen, o puedes habilitar animaciones de todo el sitio que aparecen a medida que los visitantes se desplazan por el sitio. 

Esta guía revisa cómo habilitar diferentes efectos de animación en diferentes áreas de tu sitio.

Consejo: Para añadir efectos de desplazamiento a tu sitio, como títulos de imágenes y leyendas, visita Cómo crear efectos de desplazamiento para tus imágenes.

Antes de comenzar

  • Las animaciones de bloques de imagen individuales, bloques de citas y otras áreas anulan las animaciones de todo el sitio.
  • Algunas páginas de la colección, como páginas de blog y páginas de portafolio, siempre tienen animaciones sutiles cuando se cargan, incluso cuando las animaciones de todo el sitio están deshabilitadas. 
  • No es posible añadir animaciones en la aplicación de Squarespace. 
  • Cuando desactivas las animaciones de bloque y página, esas áreas siguen los estilos de todo el sitio.

Animaciones globales del sitio

Las animaciones de todo el sitio solo están disponibles en la versión 7.1.

Las animaciones de todo el sitio se aplican a la mayoría de las áreas del sitio, con efectos más notables en algunas áreas que en otras. Estas animaciones afectan principalmente la forma en que aparecen las imágenes, el texto y otros bloques a medida que te desplazas por una página. Algunas animaciones también aparecen cuando un visitante pasa el cursor sobre enlaces y botones. 

Recomendamos habilitar un estilo de animación y, a continuación, ver cómo se ve en diferentes páginas de tu sitio. Experimenta con cada estilo hasta encontrar el que mejor se adapte a tu contenido.

Para animar el contenido del sitio: 

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Animaciones.
  2. Haz clic en un estilo de animación.
  3. Elige una velocidad de animación lenta, media o rápida.
  4. Sitúa el cursor sobre Listo y haz clic en Guardar

Estilos de animación

Elige alguno de estos estilos de animación:

  • Ninguno: deshabilita animaciones de todo el sitio.
  • Difuminado: el contenido se desvanece a medida que se ve en la página.
  • Escala: el contenido se anima desde un tamaño más pequeño hasta su tamaño final, creando un efecto de zoom.
  • Diapositiva: el contenido se desliza hacia arriba en su lugar, lo que acentúa el efecto de desplazarse hacia abajo por la página.
  • Clip: el contenido se desliza línea por línea desde la izquierda.
  • Flex: añade animaciones únicas a encabezados, texto vinculado, botones y páginas de portafolio. 

Eliminar animaciones de todo el sitio

Para deshabilitar animaciones en todo el sitio:

  1. Mientras editas una página, haz clic en el ícono del pincel y, a continuación, en Animaciones.
  2. Elige Ninguno.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.

Mira el video

Animaciones de fondo

Puedes animar el fondo del sitio con efectos de imagen o un video en bucle, dependiendo de la versión del sitio.

Efectos de imagen

Los efectos de imagen de fondo solo están disponibles en la versión 7.1.

Si la sección de tu página utiliza una imagen de fondo, puedes agregar efectos de imagen para darle al fondo un aspecto más estilizado. Algunos efectos agregan una animación para que la imagen siempre se mueva, mientras que otros solo aparecen cuando quien visita el sitio se desplaza por esa sección del sitio.

Para añadir un efecto a una imagen:

  1. Después de agregar un fondo de sección, en el editor de secciones, haz clic en Fondo.
  2. Desplázate hacia abajo hasta Efecto de imagen y elige un efecto en el menú desplegable. El efecto aparecerá en la vista previa del sitio.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.

Ten en cuenta lo siguiente:

  • Los efectos de imagen solo aparecen en navegadores y dispositivos compatibles con WebGL, una herramienta que funciona con el procesador gráfico del dispositivo. Para comprobar si el navegador es compatible, visita get.webgl.org. Si el navegador no es compatible con WebGL, el fondo de la sección permanecerá estático.
  • Los efectos de imagen no aparecen sobre los videos de fondo.

Videos de fondo

Puedes agregar videos de fondo a secciones de páginas, banners y otras áreas, dependiendo de la versión del sitio. 

  • Los videos de fondo se reproducen en un bucle sin sonido.
  • Para añadir un video de fondo, necesitarás una URL de YouTube o Vimeo. No es posible subir un video directamente a Squarespace. 

Para obtener más información, visita Cómo agregar videos de fondo

Animaciones en bloques

Puedes agregar animaciones a bloques de imagen y bloques de citas que los visitantes vean cuando cargan o actualizan la página.

Bloques de imágenes

Para animar un bloque de imagen:

  1. En el editor Bloque de imagen, haz clic en Diseño y, a continuación, en Animaciones.
  2. Selecciona un efecto de la lista para aplicarlo a la imagen y a cualquier texto. Al seleccionar una opción, verás una vista previa de esta en la página.
  3. Para animar la imagen y el texto por separado, selecciona Personalizado y, a continuación, las opciones Imagen y Texto.

Elige entre estas opciones de animación para tu imagen, texto o para ambos:

  • Fundido de entrada: El bloque, la imagen o el texto ingresa difuminado.
  • Deslizar hacia arriba: El bloque, la imagen o el texto se desliza hacia arriba.
  • Deslizar hacia abajo: La imagen o el texto se deslizan hacia abajo
  • Recorte horizontal: El bloque o la imagen se carga en capas horizontales.
  • Recorte vertical: El bloque o la imagen se carga en capas verticales.
  • Inclinado hacia arriba: El bloque o la imagen ingresa con una ampliación y una inclinación hacia arriba.
  • Inclinado hacia abajo: El bloque o la imagen ingresa con una ampliación y una inclinación hacia abajo.
  • Foco de ingreso: el bloque, la imagen o el texto aparece borroso y, luego, enfocado
  • Colisionar: La imagen y el texto se desplazan hacia dentro desde los laterales
  • Revelar: la imagen y el texto se desplazan hacia fuera desde el centro
  • Deslizar desde la izquierda: La imagen o el texto se deslizan desde la izquierda
  • Deslizar desde la derecha: La imagen o el texto se deslizan desde la derecha

Bloques de Cita

Para animar un bloque de citas:

  1. Haz clic en la pestaña Diseño del editor de bloques.
  2. Selecciona un efecto en el menú desplegable. A medida que exploras las opciones, verás previsualizaciones de cómo se cargan.

Elige entre lo siguiente:

  • Difuminado de entrada: El texto ingresa con un difuminado.
  • Deslizar hacia arriba: El texto se desliza desde abajo.
  • Entrada fuera de foco: El texto aparece borroso y, luego, se hace foco.
  • Revelar: El texto se desplaza hacia afuera desde el centro.

Solución de problemas

Si las animaciones no aparecen en tu sitio web, ten en cuenta: 

  • Las animaciones de todo el sitio y los fondos de sección solo están disponibles en la versión 7.1.
  • Algunos contenidos solo admiten el estilo de animación Difuminado. Si eliges un estilo diferente, el contenido que no lo admite se difuminará.
  • Si ninguno de tus contenidos tiene animación, asegúrate de que estás utilizando un navegador compatible.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 27 de 54
Animaciones y efectos de imagen