Défilement

Curtain scroll reveal

Une rangée d'images qui se découvrent chacune derrière un masque de rideau coulissant au fur et à mesure de la progression du défilement les fait apparaître et se recouvrent lorsqu'elles reculent.

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.

Utiliser Curtain scroll reveal

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: revealDirection, imageCount, settleScale

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 versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

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.

1874Pinned lateral galleryDéfilementUne 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.

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.

1855Enter view revealDéfilementLes blocs qui glissent et s'estompent au moment où ils apparaissent et se réinitialisent une fois qu'ils partent, de sorte que la révélation se répète à chaque passage.

2838Scroll dim text revealDéfilementUn paragraphe est grisé et s'éclaircit mot par mot au fur et à mesure de la progression du défilement, puis s'assombrit à nouveau lorsque vous faites défiler vers l'arrière.

1880Scroll entrance wrapperDéfilementUn wrapper qui maintient ses enfants garés hors position jusqu'à ce qu'ils défilent, puis joue une arrivée facilitée et ne la répète jamais.