Composants

scroll

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 38

Chargement de l’index de recherche complet.

Masonry flow

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

Composable Reveal

1676Composable RevealAnimationUn emballage de révélation dont les parties diapositive, fondu, zoom et défocalisation peuvent chacune être activées et combinées en une seule transition à ressort.

Directional Slide In

1684Directional Slide InAnimationUne révélation qui pousse le contenu depuis l'un des quatre côtés d'une distance définie et permet à un ressort d'absorber l'arrivée.

Focus in reveal

1697Focus in revealAnimationUne révélation qui rend le contenu flou et lui permet de s'affiner lorsqu'il entre dans la vue, avec un délai facultatif par élément pour une pile de lignes.

Parallax Starfield

1727Parallax StarfieldArrière-plansTrois couches de points dispersés défilent vers le haut à des vitesses différentes et glissent contre le pointeur, de sorte que le champ gagne en profondeur.

Staggered Fade List

1751Staggered Fade ListAnimationLignes qui s'estompent à partir d'une opacité de départ choisie l'une après l'autre à mesure que le groupe entre dans la vue, l'écart entre elles étant réglable.

Blur fade reveal

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.

Enter view reveal

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.

Parallax plate gallery

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.

Pinned lateral gallery

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.

Scroll entrance wrapper

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.

Scroll expand stage

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.

Scroll focus column

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.

Stacked blur fade

1891Stacked blur fadeDéfilementUn bord de panneau de défilement qui se dissout dans la couleur du panneau à travers plusieurs flous d'arrière-plan empilés au lieu d'une bande de flou plate.

Sticky zoom hero

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.

Velocity marquee

1901Velocity marqueeDéfilementDeux rangées de texte répétitif qui dérivent dans des directions opposées et accélèrent ou inversent le défilement de la page, puis reviennent à leur rythme de base.

Auto-Hide Nav Bar

2111Auto-Hide Nav BarNavigationUne barre supérieure collante qui glisse hors de vue lorsque le visiteur fait défiler vers le bas et revient dès qu'il fait défiler vers le haut.

Edge aware popover

2145Edge aware popoverSuperpositionsUn popover qui sort de sa gâchette et se retourne ou se déplace vers le côté opposé lorsque le côté que vous avez demandé dépasse le bord du cadre, restant collé pendant que les choses défilent.

Scroll Progress Text Reveal

2220Scroll Progress Text RevealEffets de texteUne longue phrase reste épinglée à l'écran pendant que la page défile devant elle, et chaque mot individuellement s'éclaire de faible à complètement allumé lorsque la position de défilement atteint son tour.

Scrolling tile lattice

2222Scrolling tile latticeArrière-plansUn réseau sans fin qui défile dans une direction, remplissant les cellules sous le pointeur et les laissant disparaître derrière lui.

Staggered Reveal Text

2242Staggered Reveal TextEffets de texteUne phrase apparaît en morceaux décalés, divisée en mots, caractères ou lignes, en utilisant un style d'entrée choisi tel que fondu, flou, glissement ou échelle.

Blur in word reveal

2307Blur in word revealEffets de texteLes mots d’une phrase passent d’un léger flou à une netteté l’un après l’autre à mesure que la phrase défile.

Fading edge scroll panel

2353Fading edge scroll panelMise en pageUn panneau de défilement qui masque la barre native, fait flotter un pouce mince uniquement pendant que vous l'utilisez et fait disparaître le contenu sur le bord qui a encore plus à atteindre.

Focus scroll list

2357Focus scroll listMise en pageUne file d'attente déroulante dont les lignes apparaissent en taille réelle et en opacité lorsqu'elles atteignent le centre de la vue, avec survol et sélection au clavier.

Overlay scroll panel

2396Overlay scroll panelMise en pageUn panneau délimité qui masque la barre de défilement de la plate-forme et dessine sa propre piste de superposition fine, de la taille d'un pouce par rapport au contenu.

Progressive edge blur

2407Progressive edge blurMise en pageUne bande épinglée sur un bord d'un panneau défilant qui brouille et fond progressivement son contenu vers l'arrière-plan au lieu de le couper sur une ligne dure.

Reading highlight copy

2410Reading highlight copyEffets de texteUn paragraphe qui s'éclaire mot par mot lorsque vous le faites défiler, laissant les mots lus clairs et les mots non lus atténués, de sorte que la position de défilement sert également de position de lecture.

Scroll blur reveal text

2418Scroll blur reveal textEffets de texteUn bloc de texte qui commence par être flou et décalé, puis s'accentue mot par mot ou lettre par lettre la première fois qu'il défile.

Scroll cue button

2506Scroll cue buttonBoutonsUne petite possibilité de défilement dont le chevron tombe à travers sa fenêtre découpée en survol ou en focus dans une boucle sans fin, et dont le clic fait glisser la zone de défilement la plus proche vers la section suivante.

Scroll hint button

2555Scroll hint buttonBoutonsUne capsule verticale étroite avec une perle qui glisse vers le bas à l'intérieur sur une boucle, légendée ci-dessous, qui fait défiler la zone de défilement la plus proche d'un écran lorsqu'elle est enfoncée.

Scroll cue pill

2584Scroll cue pillBoutonsUne grande capsule contenant une longue et fine flèche qui dérive sur une boucle, grandit sous le pointeur et s'effondre une fois utilisée.

Hatch sweep button

2685Hatch sweep buttonBoutonsDe fines hachures diagonales s'effacent sur le bouton lors du survol et défilent pour toujours, inversant l'étiquette partout où une ligne la traverse.

Scroll float reveal

2820Scroll float revealEffets de texteLes caractères de titre flottent depuis le bas et prennent forme à mesure que leur section défile dans la fenêtre, nettoyée directement jusqu'à la position de défilement.

Scroll focus reveal

2821Scroll focus revealEffets de texteUn paragraphe commence par être incliné, sombre et flou, puis se redresse et s'accentue mot par mot au fur et à mesure que le lecteur le parcourt.

Scroll dim text reveal

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.

Scroll progress rail

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.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Auto-Hide Nav Bar
Une barre supérieure collante qui glisse hors de vue lorsque le visiteur fait défiler vers le bas et revient dès qu'il fait défiler vers le haut.
Blur fade reveal
Le contenu qui arrive flou et transparent, puis s'accentue la première fois qu'il défile sans déplacer un seul pixel.
Blur in word reveal
Les mots d’une phrase passent d’un léger flou à une netteté l’un après l’autre à mesure que la phrase défile.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)