Cómo añadir animaciones al desplazarse

‍Sitely se centra mucho en lo que podría considerarse el primer nivel del diseño web: el diseño visual estático. La experiencia del visitante depende de elementos de diseño más clásicos como el color, el contraste, la tipografía y el espacio geométrico. Aquí veremos la función de animaciones de Sitely.

‍El uso de la palabra "experiencia" es muy específico, porque intentar integrar animaciones puede ser a la vez divertido y frustrante (ojalá un poco más de lo primero y menos de lo segundo). La razón es que las animaciones pueden alterar el equilibrio del diseño mucho más que los elementos estáticos. Al otorgar ilusión de vida y movimiento, puedes terminar con partes excesivas o insuficientes, desconectadas, que no encajan e incluso perjudican lo que las rodea.

‍Pero cuando se hace bien, estas entidades de vida limitada hacen que el diseño se sienta más como una interacción orgánica. La narrativa fluye y los contenidos de la página se convierten en cálidas invitaciones a seguir explorando.

‍Así que, a jugar.

‍Este es un diseño sencillo sobre Halloween con la intención de capturar parte de la diversión y la locura.

‍Las animaciones al desplazarse pueden aplicarse a imágenes, botones, cajas de texto y elementos de video. Activarás las animaciones mediante una casilla de verificación en la pestaña de estilo. Esto mostrará dos menús desplegables, uno para seleccionar la animación y otro para elegir la dirección y el tipo de movimiento. La última opción del primer menú, "otras", muestra una lista de animaciones poco convencionales, que podrían funcionar con Halloween. Debajo de la elección del estilo de animación están los controles de temporización, repetición y distancia.

‍Aunque esto sea menos restrictivo que, por ejemplo, un diseño corporativo, aún debemos ser cuidadosos con las animaciones que elegimos. Nuestros elementos en movimiento: una lápida, un perro fantasma, un adorno de bicicleta, tres fantasmitas y una calabaza que parece estar sostenida por Wednesday Addams.

‍Tras algo de experimentación, terminamos con estas opciones:

• Un rebote para la lápida aporta la idea de peso e intimidación (dentro del contexto de Halloween).
• Un balanceo para el perro, ya que el tópico clásico del letrero colgante de la posada decrépita, presente en la tradición relacionada con Halloween, va bien con la forma vertical de la imagen; y el perro es el mejor lugar para ponerlo, pues es completamente neutral.
• Nada para la decoración de la bicicleta. Hay mucho pasando alrededor y, al final, tener un elemento estable proporciona un descanso para la vista y hace que el movimiento a su alrededor sea mucho más cómodo. Tratar de percibir lo que ocurre con múltiples partes en movimiento y sin un punto de estabilidad generó confusión y redujo lo entretenido del efecto.
• Goma elástica para los fantasmas. Se asemejan a masas amorfas, por lo que la animación de goma es perfecta para ellos, además de reforzar el carácter cómico de sus expresiones.
• Por último, tada para la calabaza sostenida. Genera un momento de ¡mira!, similar al estilo de la fotografía, que es como si la chica se preparara para ofrecer la calabaza al espectador.

‍El resultado final:

‍En cuanto a un ejemplo más convencional de las animaciones, en este diseño se usa la función de retraso para crear un tema de descubrimiento y exploración lineal, mientras se comunican también los servicios de la empresa anunciada:

‍

‍