Pular para o conteúdo
Fieldbook
Menu
Entrar
PT-BR

Componentes

scroll

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guiaConecte seu agenteExplorar modelos de páginas

36 de 38

Carregando o índice completo de busca.

Masonry flow
1532Masonry flowLayoutUma parede de alvenaria que agrupa ladrilhos de alturas variadas em colunas, levanta cada um deles à medida que aparece e recoloca toda a grade quando a contagem de colunas muda.
Composable Reveal
1676Composable RevealAnimaçãoUm invólucro revelador cujas partes de deslizamento, fade, zoom e desfocagem podem ser ativadas e combinadas em uma única transição de mola.
Directional Slide In
1684Directional Slide InAnimaçãoUma revelação que empurra o conteúdo de qualquer um dos quatro lados por uma distância definida e permite que uma mola absorva a chegada.
Focus in reveal
1697Focus in revealAnimaçãoUma revelação que deixa o conteúdo fora de foco e o deixa mais nítido à medida que entra na visualização, com um atraso opcional por item para uma pilha de linhas.
Parallax Starfield
1727Parallax StarfieldFundosTrês camadas de pontos dispersos rolam para cima em taxas diferentes e deslizam contra o ponteiro, para que o campo ganhe profundidade.
Staggered Fade List
1751Staggered Fade ListAnimaçãoLinhas que desaparecem a partir de uma opacidade inicial escolhida, uma após a outra, à medida que o grupo entra na visualização, com o espaço entre elas ajustável.
Blur fade reveal
1843Blur fade revealRolagemConteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.
Enter view reveal
1855Enter view revealRolagemBlocos que deslizam e desaparecem no momento em que aparecem e se reiniciam quando saem, de modo que a revelação é reproduzida novamente a cada passagem.
Parallax plate gallery
1873Parallax plate galleryRolagemUma galeria vertical onde o número de índice superdimensionado de cada placa flutua em uma taxa diferente da própria placa, com um trilho de progresso de rolagem na parte inferior.
Pinned lateral gallery
1874Pinned lateral galleryRolagemUma seção que permanece no lugar enquanto a rolagem vertical é gasta arrastando uma linha de painéis lateralmente, depois libera e permite que a página continue.
Scroll entrance wrapper
1880Scroll entrance wrapperRolagemUm invólucro que mantém seus filhos estacionados até que eles apareçam, depois reproduz uma chegada facilitada e nunca a repete.
Scroll expand stage
1881Scroll expand stageRolagemUm pequeno quadro arredondado cresce para preencher toda a janela de visualização conforme você rola, seu título desaparece enquanto o artigo abaixo desaparece.
Scroll focus column
1882Scroll focus columnRolagemUma coluna de rolagem onde cada linha desaparece e diminui à medida que sai da faixa de leitura e volta à presença total ao entrar, de modo que apenas o meio fica totalmente sólido.
Stacked blur fade
1891Stacked blur fadeRolagemUma borda do painel de rolagem que se dissolve na cor do painel através de vários desfoques de fundo empilhados em vez de uma faixa de desfoque plana.
Sticky zoom hero
1892Sticky zoom heroRolagemUm painel principal que permanece fixado enquanto você rola, empurrando o pano de fundo em sua direção até ficar desfocado e entregar a página ao texto abaixo.
Velocity marquee
1901Velocity marqueeRolagemDuas linhas de texto repetido que se movem em direções opostas e aceleram ou revertem com a rolagem da página e, em seguida, voltam ao ritmo base.
Auto-Hide Nav Bar
2111Auto-Hide Nav BarNavegaçãoUma barra superior fixa que desliza para fora da vista conforme o visitante rola para baixo e desliza de volta assim que rola para cima.
Edge aware popover
2145Edge aware popoverSobreposiçõesUm popover que sai do gatilho e vira ou muda para o lado oposto quando o lado solicitado ultrapassa a borda do quadro, permanecendo colado enquanto as coisas rolam.
Scroll Progress Text Reveal
2220Scroll Progress Text RevealEfeitos de textoUma frase longa fica fixada na tela enquanto a página passa por ela, e cada palavra ilumina individualmente de fraca a totalmente iluminada conforme a posição de rolagem atinge sua vez.
Scrolling tile lattice
2222Scrolling tile latticeFundosUma rede delineada sem fim que rola em uma direção, preenchendo as células sob o ponteiro e deixando-as desaparecer atrás dele.
Staggered Reveal Text
2242Staggered Reveal TextEfeitos de textoUma frase aparece em partes escalonadas, divididas em palavras, caracteres ou linhas, usando um estilo de entrada escolhido, como esmaecimento, desfoque, deslizamento ou escala.
Blur in word reveal
2307Blur in word revealEfeitos de textoAs palavras em uma frase passam de um borrão suave para um foco nítido, uma após a outra, à medida que a frase aparece.
Fading edge scroll panel
2353Fading edge scroll panelLayoutUm painel de rolagem que oculta a barra nativa, flutua um polegar fino apenas enquanto você o usa e esmaece o conteúdo em qualquer borda que ainda tenha mais para alcançar.
Focus scroll list
2357Focus scroll listLayoutUma fila rolável cujas linhas aparecem em tamanho real e opacidade à medida que chegam ao centro da visualização, com foco e seleção pelo teclado.
Overlay scroll panel
2396Overlay scroll panelLayoutUm painel delimitado que oculta a barra de rolagem da plataforma e desenha sua própria trilha de sobreposição estreita, do tamanho de um polegar de acordo com o conteúdo.
Progressive edge blur
2407Progressive edge blurLayoutUma faixa fixada em uma borda de um painel de rolagem que desfoca e esmaece seu conteúdo gradualmente no fundo, em vez de cortá-lo em uma linha rígida.
Reading highlight copy
2410Reading highlight copyEfeitos de textoUm parágrafo que se ilumina palavra por palavra conforme você o rola, deixando as palavras lidas brilhantes e as não lidas esmaecidas, de modo que a posição de rolagem também funciona como uma posição de leitura.
Scroll blur reveal text
2418Scroll blur reveal textEfeitos de textoUm bloco de texto que começa desfocado e deslocado, depois fica mais nítido, palavra por palavra ou letra por letra, na primeira vez que é exibido.
Scroll cue button
2506Scroll cue buttonBotõesUma pequena affordance de rolagem cuja divisa cai através de sua janela cortada ao passar o mouse ou focar em um loop infinito, e cujo clique desliza a área de rolagem mais próxima em direção à próxima seção.
Scroll hint button
2555Scroll hint buttonBotõesUma cápsula vertical estreita com uma conta que desliza para baixo dentro dela em um laço, legendado abaixo, que rola a área de rolagem mais próxima uma tela quando pressionada.
Scroll cue pill
2584Scroll cue pillBotõesUma cápsula alta segurando uma flecha longa e fina que flutua em um laço, cresce sob o ponteiro e desmorona quando usada.
Hatch sweep button
2685Hatch sweep buttonBotõesA hachura diagonal fina aparece sobre o botão ao passar o mouse e rola para sempre, invertendo o rótulo sempre que uma linha o cruza.
Scroll float reveal
2820Scroll float revealEfeitos de textoOs caracteres de título flutuam de baixo para cima e assumem forma à medida que sua seção rola pela janela de visualização, passando diretamente para a posição de rolagem.
Scroll focus reveal
2821Scroll focus revealEfeitos de textoUm parágrafo começa inclinado, escuro e desfocado, depois se endireita e fica mais nítido, palavra por palavra, à medida que o leitor o percorre.
Scroll dim text reveal
2838Scroll dim text revealRolagemUm parágrafo fica esmaecido e clareia palavra por palavra em sincronia com o progresso da rolagem, depois escurece novamente conforme você rola para trás.
Scroll progress rail
2839Scroll progress railRolagemUma barra fina fixada na parte superior de um painel rolável que preenche da esquerda para a direita em sincronia exata com a distância que o conteúdo é rolado e volta quando você rola para cima.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

  • Auto-Hide Nav Bar

    Uma barra superior fixa que desliza para fora da vista conforme o visitante rola para baixo e desliza de volta assim que rola para cima.

  • Blur fade reveal

    Conteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.

  • Blur in word reveal

    As palavras em uma frase passam de um borrão suave para um foco nítido, uma após a outra, à medida que a frase aparece.

Orientações de design
Abrir o índice completo
Etiquetas
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)