Controlador de desplazamiento, activador de desplazamiento, estado de desplazamiento y transición de vista

Dije uno y en realidad era el otro y cuando necesitaba el otro usé uno. Tengan paciencia mientras noto similitudes y diferencias de alto nivel entre los dos. animación impulsada por desplazamiento, Animación activada por desplazamiento, Estado de desplazamiento de consulta de contenedory Ver transición Para tu yo futuro.

un pergamino——conducido La animación es una animación que responde al desplazamiento. Específicamente, existe una conexión directa entre el progreso del desplazamiento y el progreso de la animación. Desplácese hacia adelante y la animación avanza. Desplácese hacia atrás y la animación se ejecutará hacia atrás. Deja de desplazarte y la animación se detiene.

.element {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

un pergamino——motivado La animación se ejecuta y se ejecuta completamente en desplazamiento. En otras palabras, no existe una conexión directa con el progreso del desplazamiento. Cuando un elemento cruza un umbral definido, se llama Rango de activación del disparador — Corre, corre, corre animado. Por ejemplo, cuando el elemento entra y sale del puerto de desplazamiento.

Esto es borrador de trabajo Especificación de nivel 5 del módulo de reglas condicionales CSS. Así es como se define la especificación:

(…) Permite consultar el estado de un contenedor dependiendo de la posición de desplazamiento.

Por eso me duele tanto el cerebro. Es algo así como una animación impulsada por desplazamiento, algo así como una animación activada por desplazamiento, pero actualiza el estilo cuando el contenedor alcanza alguna condición de desplazamiento, como:

.sticky-nav {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  @container scroll-state(stuck: top) {
    background: orangered;
    border-radius: 0;
    flex-direction: row;
    width: 100%;

    a {
      text-decoration: none;
    }
  }
}

Ver transición

¡No se trata de desplazarse! Esto está relacionado con view(). De lo que realmente estamos hablando es de una API completa con funcionalidad CSS y JavaScript entrelazadas que hace dos cosas:

Conversión del mismo documento

Los elementos cambian de un estado a otro en respuesta a la interacción del usuario. Estoy muy contento con este estado de verificación de botón de opción animado de Modern Web Weekly, donde el estado pasa de una entrada a otra.

Básicamente, el estado cambia en la misma página en la que comenzó. Bramus es el rey de todas las transiciones de vista, con toneladas de bellos ejemplos. esta colección Del equipo de Chrome.

Conversión entre archivos

Animación de una página a la siguiente. El uso predeterminado es realizar un fundido cruzado de la página A a la página B (y viceversa) Realmente fácil de implementar. Por supuesto, a partir de ahí las cosas pueden volverse más complicadas. Sunkanmi ha compartido varias recetas recientemente.como este bonito que borra la primera página con un círculo clip-path Revela la segunda página.

¡eso es todo!

Me ayuda a poner las cosas en perspectiva.