Animación empática Trucos CSS – Trucos CSS

La animación web suele ser un tema controvertido. Creo que esto se debe en parte a que la mala animación es deslumbrantemente obvia, mientras que la animación bien ejecutada se desvanece en el fondo sin ningún problema. Cuando se maneja bien, la animación realmente puede elevar un sitio web, ya sea simplemente agregando un poco de personalidad o brindando señales visuales y reduciendo la carga cognitiva. Desafortunadamente, a menudo parece que hay dos campos, accesibilidad contra. animación¡Es una pena porque podemos tenerlo todo! Todo lo que se necesita es un poco de atención.

Aquí hay algunas preguntas importantes que debe hacer al crear animaciones.

¿Esta animación tiene un propósito?

Esto suena serio, pero no se preocupe, el propósito del sitio es clave. Si estás construyendo una cartera personal, ¡no lo dudes! Sin embargo, si alguien está tratando de presentar una declaración de impuestos, es poco probable que las animaciones de arranque caprichosas sean buenas. Por otro lado, una barra de progreso animada puede ser un buen toque al proporcionar comentarios visuales sobre la acción del usuario.

¿Desvía la atención de la información importante?

Es demasiado fácil dejarse llevar por la emoción de cuchichear, pero recuerda que la web es ante todo un sistema de información. Cuando las personas intentan leer, las animaciones de texto o las animaciones que se reproducen cerca pueden distraer mucho, especialmente para las personas con ADD o ADHD. Una gran animación ayuda a enfocar, no lo distorsiona.

¡Y entonces! Tu animación pasó la prueba, ¿qué sigue? Aquí hay algunos pensamientos…

¿Permitimos que los usuarios optaran por no participar?

Es importante que nuestras animaciones sean seguras para personas sensibles al movimiento. Las personas con trastornos vestibulares (oído interno) pueden experimentar mareos, dolores de cabeza o incluso náuseas debido al contenido animado.

Afortunadamente, podemos entrar en la configuración del sistema operativo con prefers-reduced-motion Consulta de medios Esta consulta de medios detecta si el usuario le ha pedido al sistema operativo que minimice la cantidad de animación o movimiento que utiliza.

Ajustes de movimiento reducidos en macOS.

Aquí hay un ejemplo:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Este fragmento ingresa a esta configuración de usuario y, si está activado, se deshace de él. todo sus animaciones y transiciones CSS. Este es un enfoque un poco mazo: recuerde que la palabra clave en esta consulta de medios es reducido. Asegúrese de que la funcionalidad no se vea comprometida y que los usuarios no pierdan un contexto importante al optar por no participar en la animación. Prefiero adaptar las opciones de tráfico reducido para estos usuarios. Piense simplemente en atenuar la opacidad en lugar de efectos de zoom o panorámica.

Sin embargo, ¿qué pasa con JavaScript?

¡Me alegra que hayas preguntado! ¡También podemos usar la aplicación de medios con tráfico reducido en el terreno de JavaScript!

let motionQuery = matchMedia('(prefers-reduced-motion)');

const handleReduceMotion = () => {
  if (motionQuery.matches) {
    // reduced motion options
  }
}

motionQuery.addListener(handleReduceMotion);
handleReduceMotion()

Tocar las preferencias del sistema no está protegido por viñetas. Después de todo, no hay garantía de que cualquier persona afectada por el tráfico sepa cómo cambiar su configuración. Para mayor seguridad, es posible agregar un interruptor de movimiento reducido en la interfaz de usuario y devolver la energía a las manos del usuario para decidir. Nosotros {el equipo} hay un rendimiento realmente bueno en su sitio

Aquí hay un ejemplo claro:

Animaciones de desplazamiento

Una de mis cosas favoritas sobre la animación web es conectarse con las interacciones del usuario. Abre un mundo de posibilidades creativas y realmente le permite interactuar con los visitantes. Pero es importante recordar que no todas las interacciones están permitidas; algunas (como el desplazamiento) están inherentemente relacionadas con la forma en que alguien navega por su sitio.

Nielson Norman Group hizo algunos gran investigacion en las interacciones de desplazamiento. Una parte en particular realmente me llama la atención. Descubrieron que muchos usuarios enfocados en tareas no podían notar la diferencia entre el tiempo de carga lento y las animaciones de entrada activadas por desplazamiento. Todo lo que notaron fue un retraso decepcionante en la interfaz de tiempo de respuesta. Puedo conectarme con eso; es molesto cuando intenta escanear un sitio web en busca de información y tiene que esperar a que la página se aclare y se desvanezca lentamente.

Si usa GreenSock Disparador de desplazamiento plugin para tus animaciones, estás de suerte. Hemos agregado una pequeña gran propiedad para evitar esta decepción: fastScrollEnd.

fastScrollEnd detecta la velocidad de desplazamiento de los usuarios. ScrollTrigger salta las animaciones de entrada a su estado final cuando el usuario se desplaza súper rápido, como si rápido. ¡Míralo!

También hay una manera súper fácil de hacer que sus animaciones de desplazamiento sean útiles para reducir el movimiento. ScrollTrigger.matchMedia():


Espero que estos fragmentos e ideas te ayuden. ¡Recuerde, piense en el objetivo, lidere con empatía y use sus habilidades de animación de manera responsable!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rtp live