Cómo añadir animaciones a tu página web de Squarespace
Las animaciones pueden hacer que una página web de Squarespace resulte más cuidada, interactiva y dinámica.
Sin embargo, también pueden hacer que una página web resulte recargada, distraiga la atención o se cargue lentamente si se utilizan sin moderación.
El objetivo no es animarlo todo.
El objetivo es utilizar el movimiento para dirigir la atención.
Una buena animación ayuda a que el usuario se fije en un botón importante, comprenda una transición, explore una galería o perciba más dinamismo en la marca. Una mala animación resulta molesta.
A continuación te presentamos algunas de las mejores formas de añadir animaciones a una página web de Squarespace, desde las opciones nativas de Squarespace hasta los complementos que no requieren programación y los efectos CSS sencillos.
Empieza con las animaciones integradas de Squarespace
Antes de añadir un complemento, comprueba qué te ofrece ya Squarespace.
Squarespace incluye animaciones integradas para toda la web que pueden añadir un movimiento sutil a tu sitio. Dependiendo de tu plantilla y de tu configuración, puedes utilizar efectos como animaciones de desvanecimiento, cambio de escala, deslizamiento, recorte y de tipo «flex».
Este es el mejor punto de partida si solo quieres un ligero efecto de movimiento.
Las animaciones integradas de Squarespace resultan útiles cuando quieres:
- Animaciones sencillas de entrada
- Una experiencia de desplazamiento más fluida
- Movimientos sutiles sin necesidad de instalar nada
- Una mejora estética rápida
- Animaciones que parecen propias de la plataforma
Si quieres un control más avanzado, efectos más espectaculares, texto animado, información que aparece al pasar el cursor, movimiento de fondo o transiciones personalizadas, ahí es donde entran en juego los complementos y el código personalizado.
Lee la guía de Squarespace sobre animaciones en toda la web
1. Complemento de Spark
El complemento Spark es una de las formas más sencillas de añadir animaciones y efectos visuales a una página web de Squarespace sin necesidad de programar.
Incluye una biblioteca de personalizaciones de diseño, marketing, navegación y animación. Puedes utilizarla para efectos al pasar el cursor, animaciones de desplazamiento, fondos animados, bucles de texto, contadores numéricos, barras de anuncios animadas y otras mejoras visuales.
Utiliza Spark si quieres:
- Animaciones al pasar el cursor
- Animaciones de desplazamiento
- Efectos de texto animados
- Contadores de números
- Barras de anuncios animadas
- Animaciones de fondo
- Carruseles de logotipos animados
- Una interfaz visual sin código
Spark es la mejor opción para los propietarios de sitios web y los diseñadores que buscan una gran variedad de opciones de animación en una sola herramienta.
Resulta especialmente útil cuando se quieren incluir pequeños detalles interactivos por toda la web, en lugar de un único efecto personalizado.
Ideal para: diseñadores, sitios web de pequeñas empresas, páginas de destino, portafolios y marcas que buscan una experiencia interactiva más refinada.
Ejemplo de bucle de palabras en Spark
Las animaciones de bucle de texto pueden hacer que un titular resulte más dinámico al ir alternando palabras o frases clave.
Esto funciona bien en secciones destacadas, páginas de destino, páginas de servicios y páginas de campañas, en las que se quiere destacar varias ventajas sin tener que reescribir todo el titular.
Ejemplo de «Spark Hover Reveal»
Los efectos de revelación al pasar el cursor son útiles para portafolios, galerías, cuadrículas de productos, secciones de equipo y diseños basados en tarjetas.
Cuando el visitante pasa el cursor por encima de una imagen o un elemento, aparece texto adicional o información visual. De este modo, se mantiene un diseño limpio y, al mismo tiempo, se ofrece más información a los usuarios cuando la solicitan.
2. SquareKicker
SquareKicker es una potente extensión de diseño sin código para Squarespace.
No sirve solo para animaciones. Te ofrece un control más avanzado sobre el diseño, el espaciado, el estilo, las secciones, los botones, las imágenes, el texto y el comportamiento adaptativo. Pero sus herramientas de animación son una de las principales razones por las que los diseñadores lo utilizan.
Puedes crear efectos activados al desplazarte, animaciones al pasar el cursor, secciones de desplazamiento horizontal, controles deslizantes de sección, elementos fijos y diseños visuales más avanzados.
Utiliza SquareKicker si quieres:
- Animaciones basadas en el desplazamiento
- Efectos al pasar el cursor
- Secciones de desplazamiento horizontal
- Controladores deslizantes de sección
- Secciones destacadas
- Mayor control sobre el diseño sin necesidad de programar
- Diseños personalizados que van más allá de las opciones nativas de Squarespace
SquareKicker da lo mejor de sí cuando la animación forma parte de un sistema de diseño personalizado más amplio.
Si solo necesitas una animación pequeña, puede que sea más de lo que necesitas. Pero si quieres que una página de Squarespace tenga un aspecto mucho más personalizado, es una de las mejores opciones.
Ideal para: diseñadores de Squarespace, agencias, sitios web de portafolios, páginas de destino y proyectos personalizados para clientes.
Ejemplo de revelación de texto con SquareKicker
Los efectos de revelación de texto pueden hacer que las tarjetas, las imágenes o los elementos del portafolio resulten más interactivos.
Son útiles cuando se quiere que la página mantenga un aspecto limpio a primera vista y que, posteriormente, muestre más información cuando el usuario interactúe con una sección.
Ejemplo de desplazamiento horizontal con SquareKicker
Las secciones con desplazamiento horizontal pueden hacer que una página larga resulte más editorial y envolvente.
Esto puede funcionar bien para líneas temporales, portafolios, casos prácticos, secciones sobre procesos, colecciones destacadas o cualquier diseño en el que se quiera que el visitante recorra una secuencia.
Ejemplo de botones animados de SquareKicker
Las animaciones de los botones son pequeñas, pero pueden hacer que un sitio web parezca más ágil.
Un botón que se desplace, se eleve, cambie de aspecto o reaccione al pasar el cursor por encima puede ayudar a reforzar la idea de que se puede hacer clic en él. Eso sí, el efecto debe ser lo suficientemente sutil como para que no distraiga la atención de la llamada a la acción.
3. Complementos fantasma
Ghost Plugins es una amplia biblioteca de complementos, plantillas, componentes y soluciones de código para copiar y pegar de Squarespace.
Esta es una buena opción si no necesitas un paquete completo de diseño. En lugar de pagar por una herramienta completa, puedes elegir una animación o un efecto visual concreto e incorporarlo a tu página web.
Ghost resulta especialmente útil para realizar pequeñas mejoras.
Utiliza los complementos de Ghost si lo deseas:
- Efectos de animación puntuales
- Fragmentos de código gratuitos de Squarespace
- Pequeñas mejoras visuales
- Componentes de copiar y pegar
- Efectos sencillos sin necesidad de un amplio paquete de plugins
Esta es la mejor opción cuando sabes exactamente lo que necesitas.
Por ejemplo, si solo quieres enlaces animados, un efecto al pasar el cursor, un botón que se mueva o una pequeña mejora de diseño, Ghost puede ser una opción más adecuada que instalar una extensión de diseño más compleja.
Ideal para: propietarios de sitios web de bricolaje, diseñadores que buscan fragmentos de código rápidos y personas que solo necesitan un efecto concreto.
4. Efectos de texto animados
Las animaciones de texto pueden resultar muy útiles cuando se quiere que un titular o una frase clave resulte más dinámico.
Algunos ejemplos habituales son:
- Palabras rotativas
- Efectos de la escritura
- El texto revela
- Animaciones de resaltado
- Titulares deslizantes
- Frases que se desvanecen
- Contadores animados
Estos efectos pueden resultar útiles en secciones destacadas, páginas de ventas, introducciones de portafolios y páginas de destino.
Pero la animación del texto requiere moderación.
Si el titular es difícil de leer, la animación está restando eficacia a la página.
Utiliza animaciones de texto cuando ayuden a aclarar o resaltar el mensaje. Evítalas cuando distraigan la atención del mensaje.
Ideal para: secciones destacadas, páginas de destino, páginas de lanzamiento, marcas personales y sitios web de marketing.
5. Animaciones al pasar el cursor
Las animaciones al pasar el cursor son una de las formas más sencillas de hacer que una página web resulte más interactiva.
Un botón puede agrandarse ligeramente. Una tarjeta puede levantarse. Una imagen puede mostrar texto. Un enlace puede subrayarse de una forma más interesante.
Son pequeños detalles, pero hacen que la página web resulte más ágil.
Utiliza animaciones al pasar el cursor sobre:
- Botones
- Fichas de productos
- Elementos de la cartera
- Fichas del blog
- Galerías de imágenes
- Fichas de equipo
- Enlaces de navegación
- Recursos destacados
La principal limitación es el uso en dispositivos móviles. Los efectos al pasar el cursor están diseñados para la interacción con el ratón, por lo que no siempre se reproducen de la misma forma en los teléfonos.
Eso no significa que debas evitarlos. Solo asegúrate de que la página siga funcionando bien sin el estado de desplazamiento del cursor.
Ideal para: diseños de escritorio, cuadrículas de portafolios, cuadrículas de productos, botones y diseños basados en tarjetas.
Ejemplo de efecto al pasar el cursor sobre un bloque de imagen
Al pasar el cursor por encima de una imagen y ampliarla, las imágenes del portafolio, las de productos o los recursos destacados pueden resultar más atractivas a la hora de hacer clic en ellas.
Intenta que sea sutil. Un pequeño zoom da una sensación de pulcritud. Un zoom muy marcado puede resultar molesto.
6. Barras y botones de aviso animados
Las barras y los botones de anuncios son buenos lugares para utilizar animaciones, ya que están diseñados precisamente para llamar la atención.
Una barra de anuncios animada puede resultar muy útil para:
- Ventas
- Lanzamientos
- Recordatorios de eventos
- Plazos de envío
- Lanzamientos de productos
- Llamadas a la acción en el boletín informativo
La clave está en que el movimiento resulte útil, no molesto.
Si la animación dificulta la lectura del mensaje, simplifícala.
Ejemplo de botón animado en el encabezado
Los botones animados pueden ayudar a que las llamadas a la acción importantes destaquen, sobre todo en el encabezado de la página o en la sección principal.
Esto funciona mejor cuando hay una acción principal que quieres que realicen los visitantes.
Ejemplo de movimiento al pasar el cursor por un botón
Un ligero movimiento al pasar el cursor por encima da al visitante la sensación de que el botón está activo y se puede pulsar.
Este es uno de los tipos de animación más seguros, ya que solo aparece cuando alguien interactúa con el elemento.
7. Transiciones animadas entre páginas
Las transiciones entre páginas crean una experiencia más fluida cuando los visitantes pasan de una página a otra.
En lugar de que la página cambie de forma brusca, la transición añade una animación de desvanecimiento, deslizamiento, revelación, superposición o de carga.
Esto puede hacer que una página web de Squarespace resulte más cuidada, sobre todo en el caso de portfolios, estudios creativos, fotógrafos, páginas de eventos y marcas que buscan una experiencia más cinematográfica.
Utiliza transiciones entre páginas si lo deseas:
- Transición fluida entre páginas
- Una experiencia de navegación más parecida a la de una aplicación
- Un aspecto de portafolio muy cuidado
- Un efecto de carga o de transición con la marca
- Un sutil movimiento entre la carga de una página y la siguiente
Code & Tonic ofrece un complemento de transiciones animadas entre páginas para Squarespace. Square Refresh también cuenta con un complemento de transiciones entre páginas.
Ideal para: carteras de proyectos, estudios creativos, marcas personales, agencias, fotógrafos y empresas de servicios personalizados.
Ver transiciones de página de Code & Tonic
Transición «Ver cuadrado» al actualizar la página
8. Animaciones de desplazamiento
Las animaciones de desplazamiento se activan a medida que el visitante se desplaza hacia abajo por la página.
Pueden ayudar a que una página larga resulte más dinámica, introduciendo las secciones de forma gradual en lugar de mostrarlo todo de una vez.
Entre las animaciones de desplazamiento más habituales se encuentran:
- Fundido de entrada
- Deslízate hacia dentro
- Aumentar la escala
- La imagen revela
- Movimiento tipo «paralaje»
- Secciones de desplazamiento horizontal
- Secciones destacadas
- Movimiento basado en el progreso
Las animaciones de desplazamiento son muy eficaces, pero también es fácil abusar de ellas.
Una buena regla: utiliza animaciones de desplazamiento para crear ritmo, no ruido.
Si cada bloque aparece volando desde una dirección diferente, la página puede resultar agotadora. Los fundidos sencillos y los movimientos sutiles suelen envejecer mejor.
Ideal para: páginas de destino, portafolios, páginas de servicios, páginas de ventas extensas y narración visual.
9. Fondos animados
Los fondos animados pueden aportar dinamismo a una sección sin que el visitante tenga que interactuar.
Podrías utilizar:
- Degradados animados
- Formas en movimiento
- Elementos flotantes
- Fondos de vídeo sutiles
- Movimiento de la textura de fondo
- Máscaras de imagen animadas
Pueden funcionar bien en secciones destacadas, áreas de anuncios, páginas de lanzamiento o momentos de marca.
Pero ten cuidado con la legibilidad.
Si el fondo se mueve detrás de un texto importante, este debe seguir siendo fácil de leer. El movimiento debe complementar la sección, no entrar en conflicto con ella.
Ideal para: secciones destacadas, páginas de destino, páginas de lanzamiento, sitios web creativos y marcas con una identidad visual marcada.
10. Animaciones CSS sencillas
No siempre hace falta un complemento.
Algunas animaciones se pueden añadir con unas pocas líneas de CSS.
Por ejemplo, puedes hacer que un botón aumente ligeramente de tamaño al pasar el cursor por encima:
.sqs-button-element--primary {
transition: transform 0.3s ease;
}
.sqs-button-element--primary:hover {
transform: scale(1.05);
}Este tipo de efecto sencillo resulta útil porque es ligero y fácil de entender.
También puedes utilizar CSS para:
- Efectos al pasar el cursor por encima de los botones
- Al pasar el cursor por encima de una imagen, esta se amplía
- Animaciones de subrayado de enlaces
- Iconos parpadeantes
- Elementos flotantes
- Fundidos sencillos
- Formas giratorias
El CSS es la mejor opción cuando solo necesitas uno o dos efectos concretos y no quieres instalar un complemento completo.
Ideal para: efectos sencillos al pasar el cursor, animaciones ligeras, diseñadores que se sienten cómodos con el código y pequeños toques personalizados.
Cuándo no utilizar animaciones
Las animaciones no siempre son la solución.
No añadas animaciones solo porque la página web te parezca demasiado sencilla.
Lo primero que hay que preguntarse es:
- ¿Ayuda esto al visitante a darse cuenta de algo importante?
- ¿Esto hace que la página sea más fácil de entender?
- ¿Esto contribuye a reforzar la imagen de marca?
- ¿Esto hace que la interacción resulte más clara?
- ¿Esto ralentiza la página web?
- ¿Esto empeora la experiencia en el móvil?
La animación debe servir para llamar la atención.
Si genera confusión, elimínalo.
Consejos rápidos para mejorar las animaciones en Squarespace
- Utiliza menos animaciones de las que crees que necesitas.
- Asegúrate de que el texto importante sea legible.
- Prueba todo en el móvil.
- Evita las animaciones que retrasen el acceso al contenido.
- Utiliza el mismo estilo de animación en toda la web.
- No animes cada sección de forma diferente.
- Respeta, en la medida de lo posible, a los usuarios que prefieren una menor cantidad de movimiento.
- Haz que la página se cargue rápido.
La mejor animación suele pasar desapercibida. Hace que la página web funcione con mayor fluidez sin llamar demasiado la atención.
Conclusión final
Las páginas web de Squarespace no tienen por qué parecer monótonas.
Con los complementos, las herramientas visuales y los fragmentos de código adecuados, puedes añadir movimiento, pulir el diseño e incorporar interacción a tu sitio web.
Utiliza el complemento Spark si quieres disponer de un amplio conjunto de herramientas de animación sin código.
Utiliza SquareKicker si quieres tener un mayor control sobre el diseño y disponer de diseños visuales más avanzados.
Utiliza los complementos de Ghost si quieres crear pequeños efectos de «copiar y pegar».
Utiliza un complemento de transición entre páginas si quieres que la navegación por el sitio web resulte más fluida al pasar de una página a otra.
Utiliza CSS si solo necesitas un efecto personalizado sencillo.
Pero elijas lo que elijas, recuerda esto:
La animación debe estar al servicio de la página.
No al revés.
¿Quieres más complementos para Squarespace?
Descubre más herramientas para mejorar el diseño, la navegación, la experiencia de comercio electrónico, las galerías, las páginas de productos y el diseño del blog de tu sitio web de Squarespace.
Preguntas frecuentes sobre las animaciones de Squarespace
¿Se pueden añadir animaciones a Squarespace?
Sí. Puedes añadir animaciones a Squarespace mediante las opciones integradas, plugins de terceros, CSS personalizado, JavaScript o extensiones de diseño como Spark Plugin y SquareKicker.
¿Cuál es la forma más fácil de añadir animaciones a Squarespace?
La forma más sencilla es utilizar las animaciones integradas de Squarespace para toda la web o un complemento que no requiera código, como Spark Plugin o SquareKicker. Estos te permiten añadir efectos al pasar el cursor, animaciones al desplazarse, animaciones de texto y otros efectos visuales sin necesidad de escribir código personalizado.
¿Puedo añadir animaciones de desplazamiento a Squarespace?
Sí. Puedes añadir animaciones de desplazamiento con plugins como Spark Plugin o SquareKicker, o con bibliotecas de código personalizadas si te sientes cómodo trabajando con código.
¿Puedo añadir animaciones al pasar el cursor por los botones de Squarespace?
Sí. Puedes añadir animaciones al pasar el cursor por encima de los botones mediante CSS o con un complemento que no requiera programación. Un sencillo efecto de CSS al pasar el cursor puede hacer que los botones cambien de tamaño, se eleven, se desvanezcan o cambien de estilo cuando alguien pase el cursor por encima de ellos.
¿Las animaciones afectan negativamente al rendimiento de una página web?
Las animaciones pueden afectar negativamente al rendimiento si son pesadas, excesivas o están mal implementadas. Las animaciones CSS sencillas y los efectos de los complementos bien optimizados suelen funcionar bien. Prueba siempre tu sitio web en dispositivos móviles.
¿Deberían todos los sitios web de Squarespace utilizar animaciones?
No. Hay sitios web que funcionan mejor con muy poco movimiento. Utiliza animaciones cuando contribuyan al mensaje, dirijan la atención o mejoren la experiencia del usuario.
¿Cuáles son los mejores complementos de animación para Squarespace?
Algunas de las mejores opciones son Spark Plugin, SquareKicker, Ghost Plugins, las transiciones de página de Code & Tonic y las transiciones de página de Square Refresh. La mejor opción depende de si necesitas un kit de herramientas de diseño completo, un único efecto o una transición para toda la web.
