Desplazamiento

Curtain scroll reveal

Una fila de imágenes que se descubren detrás de una máscara de cortina deslizante a medida que avanza el desplazamiento las muestra y se vuelve a cubrir cuando se desplaza hacia afuera.

Saltlight review

Five plates from the north coast study

Scroll to draw each curtain back. Scroll up and the curtains close again.

Harbor dawn01 / 03

Ridge line02 / 03

Tide study03 / 03

Each plate follows its own range, so the row never moves in lockstep. Plates re-cover once they rise back out of range.

Cómo usar Curtain scroll reveal

Una fila de imágenes que se descubren detrás de una máscara de cortina deslizante a medida que avanza el desplazamiento las muestra y se vuelve a cubrir cuando se desplaza hacia afuera.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: revealDirection, imageCount, settleScale

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

El código, las versiones y los comandos de instalación están disponibles en el panel superior.

Conecta tu agente

Relacionados

1873Parallax plate galleryDesplazamientoUna galería vertical donde el número de índice de gran tamaño de cada placa se desplaza a un ritmo diferente al de la propia placa, con un riel de progreso de desplazamiento a lo largo de la parte inferior.

1874Pinned lateral galleryDesplazamientoUna sección que se mantiene en su lugar mientras se desplaza verticalmente arrastrando una fila de paneles hacia los lados, luego se suelta y deja que la página continúe.

1843Blur fade revealDesplazamientoContenido que llega desenfocado y transparente, luego se enfoca en su lugar la primera vez que se desplaza a la vista sin mover un solo píxel.

1855Enter view revealDesplazamientoBloques que se deslizan y se desvanecen en el momento en que aparecen a la vista y se reinician una vez que salen, por lo que la revelación se reproduce nuevamente en cada pase.

2838Scroll dim text revealDesplazamientoUn párrafo permanece atenuado y se ilumina palabra por palabra al mismo ritmo que el progreso del desplazamiento, luego se oscurece nuevamente a medida que retrocede.

1880Scroll entrance wrapperDesplazamientoUn envoltorio que mantiene a sus hijos estacionados en su posición hasta que aparecen en la vista, luego reproduce una llegada facilitada y nunca la repite.