Desplazamiento

Pinned lateral gallery

Una 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.

Lines of the city

The section holds still while your scroll drags the row beneath it.

01 / 05

Fire escapes, Lower East Side

02 / 05

Cable car lines, Nob Hill

03 / 05

Laundry lines, Trastevere

04 / 05

Power lines, Shibuya crossing

05 / 05

Scaffolding, Kreuzberg

01 / 05

Back to the regular page

The pin released once the row ran out, and normal scrolling picked back up.

Cómo usar Pinned lateral gallery

Una 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.

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: accent, panels, heading, showProgress, scrollLength

¿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?

La vista previa y la descripción son públicas. Inicia sesión con una cuenta autorizada para abrir el código, las versiones y el panel de instalación.

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.

1881Scroll expand stageDesplazamientoUn pequeño marco redondeado crece para llenar toda la ventana gráfica a medida que se desplaza, su título se eleva mientras el artículo que se encuentra debajo se desvanece.

1882Scroll focus columnDesplazamientoUna columna de desplazamiento donde cada fila se desvanece y se reduce a medida que sale de la banda de lectura y vuelve a su presencia total cuando ingresa, por lo que solo el medio es completamente sólido.

2839Scroll progress railDesplazamientoUna barra fina fijada en la parte superior de un panel desplazable que se llena de izquierda a derecha en sincronización exacta con la distancia que se desplaza el contenido y regresa cuando se desplaza hacia arriba.

1892Sticky zoom heroDesplazamientoUn panel de héroe que permanece fijado mientras te desplazas, empujando su fondo hacia ti hasta que se difumina y entrega la página al texto a continuación.

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.