Animaciones basadas en desplazamientos son un patrón de UX común en la Web. Un control basado en desplazamientos está vinculada a la posición de desplazamiento de un contenedor de desplazamiento. Esto significa que, a medida que se desplaza hacia arriba o hacia abajo, la animación vinculada se arrastra hacia delante o hacia atrás. en una respuesta directa. Algunos ejemplos son efectos como el fondo con paralaje o indicadores de lectura que se mueven a medida que te desplazas.
Los desarrolladores suelen crear animaciones basadas en desplazamientos con JavaScript para responder a eventos de desplazamiento en el subproceso principal. Esto dificulta la creación de alto rendimiento basadas en desplazamientos que se sincronizan con el desplazamiento debido al de desplazamiento que se entregan de forma asíncrona y, a menudo, provoca bloqueos debido a están en el subproceso principal.
Sin embargo, como parte del nuevo Funciones de IU y CSS disponibles en los navegadores, ahora puedes crear animaciones declarativas basadas en desplazamientos. Con los cronogramas de desplazamiento y la vista Cronogramas, conceptos nuevos que se integran con API de Web Animations (WAAPI) y API de CSS Animations, ahora puedes tener una capa lisa y sedosa animaciones basadas en desplazamientos que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código. En este caso de éxito, descubre cómo Tokopedia, redBus y Policybazaar ya se benefician de esta nueva función.
Tokopedia
Tokopedia reemplazó sus anteriores implementaciones personalizadas de JavaScript por Animaciones basadas en desplazamientos para optimizar el rendimiento de la página y mejorar la experiencia de navegación general en todo el embudo de conversión de comercio electrónico.
Logramos reducir hasta un 80% de nuestras líneas de código en comparación con el uso de de desplazamiento de JavaScript convencionales y observamos que el uso promedio de la CPU se redujo del 50% al 2% mientras te desplazabas. Andy Wihalim: Ingeniero de software sénior, Tokopedia
Código
La siguiente implementación usa la función scroll()
para establecer un desplazamiento anónimo.
Cronograma de progreso para controlar el progreso de la animación CSS. El
la visibilidad de la barra fija superior cambia según la posición de desplazamiento dentro del
se definió animationRange
.
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus tiene diferentes animaciones para dispositivos móviles y computadoras de escritorio en su la página de destino de actividades, que se muestra al inicio del embudo de conversión. Con las animaciones basadas en desplazamientos, pudimos reemplazar estas implementaciones personalizadas de JavaScript con CSS para lograr el mismo efecto.
Casos de uso
Galería de fotos con revelación de imágenes (para dispositivos móviles) y el Flujo de cobertura (para computadoras de escritorio).
Código (dispositivos móviles)
En el ejemplo anterior, Tokopedia utilizó el progreso de desplazamiento anónimo
cronograma. En el siguiente código, redBus usa el indicador de progreso de visualización.
cronograma. La animación cambia los elementos opacity
y clip-path
de <img>
dentro del animation-range
definido dentro del elemento
Desplazamiento principal, que es el desplazador de la galería de fotos en este caso.
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
Estamos muy contentos de ver esta función, ya que es una combinación perfecta de rendimiento con mejor experiencia, lo que impulsa nuestros indicadores sobre la experiencia de página para SEO. Además de que la curva de aprendizaje mínima la convierte en una actividad imprescindible para todas las sitio web. También recibimos comentarios positivos y apoyo de otros equipos para aprovechar SDA para más recorridos de los usuarios.— Amit Kumar, Ingeniería sénior Administrador, redBus.
Bazar de políticas
Comparar planes de seguros es una acción clave repetida que toman los usuarios para guiar a sus en el proceso de toma de decisiones. Con animaciones basadas en desplazamientos, Policybazaar redujo el tamaño de los elementos de baja prioridad cuando el usuario se desplaza por la tabla. Esta dio como resultado una experiencia de desplazamiento fluida y, al mismo tiempo, una mejor legibilidad.
Con las animaciones basadas en desplazamientos, pudimos maximizar el espacio del viewport para el que el usuario compare planes, lo que garantice una lectura enfocada y ordenada experiencia.—Rishabh Mehrotra, directora de Design for Life Insurance BU, PolicyBazaar.
animate-timeline
en la tabla de comparación del plan en Investment y Life
LOB (línea de negocio).Código
Al igual que en el ejemplo anterior de Tokopedia, Policybazaar usa el
Función scroll()
para establecer un cronograma de progreso de desplazamiento anónimo en
controlar el progreso de la animación CSS. En este caso, reducir la fuente
y atenuar el encabezado según la posición de desplazamiento dentro de los valores
animation-range
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
Animaciones basadas en desplazamientos como patrón común en todo el recorrido del usuario
Todas las empresas de comercio electrónico destacadas usaron animaciones basadas en desplazamientos en las páginas. con tarjetas, animaciones para llamar la atención del usuario sobre ellas . El Los siguientes ejemplos muestran efectos de desplazamiento en tarjetas en diferentes partes del usuario. del proyecto. Por lo general, se logra mediante un cronograma de progreso de vistas anónimo. para controlar el progreso de la animación CSS personalizada, como se muestra en el siguiente fragmento de CSS.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus (página principal)
Bazar de políticas (página de fichas de productos)
Tokopedia (página de detalles del producto)
Aspectos que debes tener en cuenta cuando uses la API de animaciones basadas en desplazamientos
En los navegadores no compatibles, es posible usar polyfill con animaciones basadas en desplazamientos. por ejemplo, con el Polyfill de la línea de tiempo de desplazamiento. Si lo haces, requieren pruebas adicionales para asegurarse de que funcionen bien con sus y que los navegadores que usan polyfill no experimentan animaciones experiencias con errores o bloqueos.
Desde CSS, puedes usar @supports
para probar la compatibilidad del cronograma de animación
antes de usar animaciones basadas en desplazamientos. Por ejemplo:
@supports (animation-timeline: scroll()) {
}
Recursos
- Demostraciones de animaciones basadas en desplazamientos
- Cómo animar elementos durante el desplazamiento con animaciones basadas en desplazamientos
- Codelab: Comienza a usar animaciones basadas en desplazamientos en CSS
- Extensión de Chrome: Depurador de animaciones basadas en desplazamientos
- Polyfill del cronograma de desplazamiento
- ¿Quieres informar un error o una función nueva? Queremos conocer tu opinión.
Explora los otros artículos de esta serie en los que se explica cómo las empresas de comercio electrónico se beneficiaron del uso de nuevas funciones de IU y CSS, como transiciones de vistas, ventanas emergentes, consultas de contenedores y el selector has()
.