Défilement

Pinned lateral gallery

Une section qui reste en place pendant que votre défilement vertical consiste à faire glisser une rangée de panneaux latéralement, puis se relâche et laisse la page continuer.

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.

Utiliser Pinned lateral gallery

Une section qui reste en place pendant que votre défilement vertical consiste à faire glisser une rangée de panneaux latéralement, puis se relâche et laisse la page continuer.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: accent, panels, heading, showProgress, scrollLength

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les portages, l’installation et le panneau de propriétés sont inclus dans Fieldbook Pro. L’aperçu interactif est ouvert à tous.

Connectez votre agent

Composants proches

1873Parallax plate galleryDéfilementUne galerie verticale d'accrochage où le numéro d'index surdimensionné de chaque plaque dérive à un rythme différent de celui de la plaque elle-même, avec un rail de progression à défilement le long du bas.

1881Scroll expand stageDéfilementUn petit cadre arrondi s'agrandit pour remplir toute la fenêtre à mesure que vous faites défiler, son titre s'éloignant tandis que l'article en dessous s'efface.

1882Scroll focus columnDéfilementUne colonne défilante dans laquelle chaque ligne s'estompe et rétrécit lorsqu'elle quitte la bande de lecture et revient à sa pleine présence lorsqu'elle y entre, de sorte que seul le milieu est toujours entièrement solide.

2839Scroll progress railDéfilementUne barre fine épinglée en haut d'un panneau déroulant qui se remplit de gauche à droite en synchronisation exacte avec la distance de défilement du contenu et se vide lorsque vous faites défiler vers le haut.

1892Sticky zoom heroDéfilementUn panneau de héros qui reste épinglé pendant que vous faites défiler, poussant son arrière-plan vers vous jusqu'à ce qu'il devienne flou et remette la page au texte ci-dessous.

1843Blur fade revealDéfilementLe contenu qui arrive flou et transparent, puis s'accentue la première fois qu'il défile sans déplacer un seul pixel.