Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogoscroll · stable

Efeitos de rolagem

Entradas e narrativas acionadas por viewport com conteúdo sempre acessível. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Efeitos de rolagem quando a interface precisar de entradas e narrativas acionadas por viewport com conteúdo sempre acessível.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Base

Entradas e narrativas acionadas por viewport com conteúdo sempre acessível.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-1" data-scroll-reveal><span>SCROLL 01</span><h3>Fade up</h3><p>Entrada progressiva com conteúdo sempre disponível.</p></section>
Classes, JavaScript e API
sc-scroll-demosc-scroll-1

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Usar HTML semântico e foco visível.
  • Fornecer rótulo acessível quando não houver texto visível.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Fade up

Fade up, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-1" data-scroll-reveal><span>SCROLL 01</span><h3>Fade up</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-1

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Fade down

Fade down, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-2" data-scroll-reveal><span>SCROLL 02</span><h3>Fade down</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-2

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Slide left

Slide left, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-3" data-scroll-reveal><span>SCROLL 03</span><h3>Slide left</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-3

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Slide right

Slide right, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-4" data-scroll-reveal><span>SCROLL 04</span><h3>Slide right</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-4

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Scale

Scale, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-5" data-scroll-reveal><span>SCROLL 05</span><h3>Scale</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-5

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Blur

Blur, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-6" data-scroll-reveal><span>SCROLL 06</span><h3>Blur</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-6

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Clip

Clip, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-7" data-scroll-reveal><span>SCROLL 07</span><h3>Clip</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-7

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Stagger

Stagger, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-8" data-scroll-reveal><span>SCROLL 08</span><h3>Stagger</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-8

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Sticky reveal

Sticky reveal, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-9" data-scroll-reveal><span>SCROLL 09</span><h3>Sticky reveal</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-9

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Horizontal story

Horizontal story, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-10" data-scroll-reveal><span>SCROLL 10</span><h3>Horizontal story</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-10

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Depth

Depth, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-11" data-scroll-reveal><span>SCROLL 11</span><h3>Depth</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-11

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Parallax lite

Parallax lite, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-12" data-scroll-reveal><span>SCROLL 12</span><h3>Parallax lite</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-12

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Section snap

Section snap, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-13" data-scroll-reveal><span>SCROLL 13</span><h3>Section snap</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-13

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Progressive line

Progressive line, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-14" data-scroll-reveal><span>SCROLL 14</span><h3>Progressive line</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-14

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Counter reveal

Counter reveal, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-card sc-scroll-demo sc-scroll-15" data-scroll-reveal><span>SCROLL 15</span><h3>Counter reveal</h3><p>Entrada progressiva com conteúdo disponível mesmo quando o movimento é reduzido.</p></section>
Classes, JavaScript e API
sc-cardsc-scroll-demosc-scroll-15

Inicialize scrollObserver após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados