El desplazamiento es algo que todos sabemos y hacemos en la web en la medida en que es una expectativa o quizás incluso un hábito, como cepillarnos los dientes. Probablemente por eso no pensamos demasiado en el diseño de la experiencia de desplazamiento: es una función básica bien conocida. De hecho, el dicho popular “no hay pliegue” proviene de la idea de que la gente sabe cómo desplazarse y no hay una línea arbitraria por debajo de la cual la gente no se deslice.
Las funciones basadas en el desplazamiento tienden a implicar una combinación personalizada de CSS y JavaScript. Eso es porque simplemente no hay tantas funciones nativas disponibles para hacerlo. Pero, ¿y si pudiéramos lograr algo que solo usa CSS?
Tome esta ingeniosa barra de desplazamiento horizontal con CSS, por ejemplo. Quiero hacer algo similar, pero para indicar las secciones desplazadas en lugar de capturar el desplazamiento continuo. En otras palabras, en lugar de aumentar la longitud del indicador durante el desplazamiento, solo quiero aumentar la longitud cuando se haya alcanzado una determinada sección de la página.
Como esto:
Este es mi plan: cada sección tiene un indicador que no se puede detectar hasta que llega a la parte superior de la pantalla. Ahí es donde se vuelve visible al cambiar de color y se adhiere a la parte superior de la ventana gráfica.
Exactamente lo contrario debería suceder a la inversa: el indicador lo seguirá cuando se desplace hacia arriba en la pantalla, camuflándose para no ser detectado a simple vista.
Hay dos partes clave para esto. La primera es que el indicador cambie de color cuando esté cerca de la parte superior de la pantalla. El segundo es que el indicador permanezca en la parte superior de la pantalla y baje solo cuando su sección se desplaza hacia abajo.
El segundo es fácil de hacer: usamos position: sticky; en nuestros elementos. Cuando se desplaza una página, un elemento fijo se adhiere a una posición determinada en la pantalla dentro de su contenedor principal.
Eso nos lleva a cambiar de color. Dado que el fondo de un documento HTML es blanco de forma predeterminada, mantengo el blanco como color base para la demostración. Esto significa que el indicador debe verse blanco cuando esté sobre el color base y cambiar a otro color cuando esté sobre la barra indicadora en la parte superior de la pantalla.
El indicador discontinuo es actualmente invisible, pero se vuelve visible cuando se adhiere a la parte superior y se mezcla con el color de fondo del contenedor del indicador.
Aquí es donde entran en juego los modos de fusión de CSS. Nos dan tantas opciones para crear una variedad de amalgamas de colores. Voy a ir con el valor de superposición. Éste es de naturaleza bastante dinámica. No explicaré la mezcla en profundidad (porque Programar PlusAlamanac ya hace un buen trabajo) pero teniendo en cuenta esta demostración, diré esto: cuando el color de fondo es blanco, el color de primer plano resultante es blanco; y cuando el fondo es de otro color, el color resultante es más oscuro o más claro, dependiendo del color con el que se mezcle.
Las paradas del indicador en la demostración son negras. Pero, debido a la mezcla, los vemos como blancos porque están sobre un fondo blanco. Y cuando están sobre el elemento del contenedor indicador, que tiene un hermoso tono violeta, vemos una parada del indicador violeta oscuro, porque estamos mezclando el negro de la parada del indicador con el violeta del contenedor indicador.
Comenzando con el HTML:
<div id="passageWrapper">
<strong>Sections Scrolled ↴</strong>
<!-- Indicator container -->
<div id="passage"></div>
</div>
<!-- Indicator stop -->
<div class=passageStops></div>
<!-- First Section -->
<div class="sections">
<!-- Content -->
</div>
<!-- Another indicator stop -->
<div class="passageStops"></div>
<!-- Second Section -->
<div class="sections">
<!-- Content -->
</div>
<!-- Another indicator stop -->
<div class="passageStops"></div>
<!-- Third Section -->
<div class="sections">
<!-- Content -->
</div>Bastante sencillo, ¿verdad? Hay un recipiente adhesivo en la parte superior que contiene los indicadores cuando llegan a la parte superior. A partir de ahí, tenemos tres secciones de contenido, cada una con un indicador que se pegará en la parte superior con el indicador y se combinará con él.
Aquí está el CSS:
.passageStops {
background-color: black; /* Each indicator stop is black */
mix-blend-mode: overlay; /* This makes it appear white on a white background */
width: 33.3%; /* Three sections total, so each section is one-third */
top: calc(1em + 3px);
}
#passage,
.passageStops{
height: 10px;
}
#passageWrapper,
.passageStops {
position: sticky; /* The container and stops should stick to the top */
z-index: 1; /* Make sure the indicator and stops stay at the forefront */
}
#passage {
background: violet; /* Will blend with black to make a darker violet indicator */
margin: 0 0 20px 0;
}
#passageWrapper{
background-color: white; /* Make sure we're working with white to hide indicator stops */
height: 40px;
top: 0px;
}
/* Each stop will shift one-third the width of the indicator container to cover the whole thing when the last section is reached. */
.passageStops:nth-child(4){ margin-left: 33.3%; }
.passageStops:nth-child(6){ margin-left: 66.6%; }
/* More styling, blah blah. */Los indicadores (.passageStops) son de color negro. Pero el modo de fusión de superposición hace que parezcan blancos cuando se fusiona con el fondo blanco debajo de él. Como hay tres secciones, cada indicador tiene un tercio de ancho.
Los indicadores tienen position: sticky; con un valor de distancia superior. Esto significa que los indicadores se pegarán una vez que alcancen la posición calculada desde la parte superior de la pantalla. Cuando eso sucede, los indicadores negros que aparecieron en blanco se mezclan con el contenedor del indicador violeta, lo que los hace parecer violeta oscuro, lo que representa la nueva posición de desplazamiento en la página.
Lo contrario también es cierto. Cuando un indicador pierde su posición fija, pasará del fondo violeta de la barra indicadora al fondo blanco de la página, ocultándolo una vez más … ¡como si nunca hubiera estado allí!
Aquí está la demostración nuevamente:
Eso es. Quizás pueda experimentar más con esto si tiene un fondo que no sea blanco con otro modo de fusión, o un degradado para la barra indicadora o las paradas.