ScrollFade

A borda de baixo de uma caixa que rola some no papel, como uma folha que continua. Avisa que há mais conteúdo; no fim, some.

Nesta página

Playground

Lembrete 1: toda semana, 8h.

Lembrete 2: toda semana, 9h.

Lembrete 3: toda semana, 10h.

Lembrete 4: toda semana, 11h.

Lembrete 5: toda semana, 12h.

Lembrete 6: toda semana, 13h.

Lembrete 7: toda semana, 14h.

Lembrete 8: toda semana, 15h.

Lembrete 9: toda semana, 16h.

Lembrete 10: toda semana, 17h.

Conteúdo

Fundo

HTML

<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Lembrete 1: toda semana, 8h.</p><p>Lembrete 2: toda semana, 9h.</p><p>Lembrete 3: toda semana, 10h.</p><p>Lembrete 4: toda semana, 11h.</p><p>Lembrete 5: toda semana, 12h.</p><p>Lembrete 6: toda semana, 13h.</p><p>Lembrete 7: toda semana, 14h.</p><p>Lembrete 8: toda semana, 15h.</p><p>Lembrete 9: toda semana, 16h.</p><p>Lembrete 10: toda semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span></div>

Quando usar

No fim de toda área que rola e pode esconder conteúdo: a tela, o corpo de um Drawer, uma lista de altura fixa.

Quando não usar

Numa caixa que nunca rola.
Por cima de uma ação no fim da caixa: a ação vai para um rodapé fora da rolagem.

Exemplos

Lembrete 1: toda semana, 8h.

Lembrete 2: toda semana, 9h.

Lembrete 3: toda semana, 10h.

Lembrete 4: toda semana, 11h.

Lembrete 5: toda semana, 12h.

Lembrete 6: toda semana, 13h.

Lembrete 7: toda semana, 14h.

Lembrete 8: toda semana, 15h.

Lembrete 9: toda semana, 16h.

Lembrete 10: toda semana, 17h.

Lembrete 11: toda semana, 18h.

Lembrete 12: toda semana, 19h.

Lembrete 13: toda semana, 20h.

Lembrete 14: toda semana, 21h.

Numa caixa que rola

Role dentro da caixa. A caixa que rola não leva recuo; o recuo fica no conteúdo dentro dela.

Mostrar código

HTML

<div class="caixa-que-rola">                                   <!-- sem recuo -->
  <div class="conteudo">…</div>                                 <!-- o recuo fica aqui -->
  <span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- sempre o último -->
</div>

Bons e maus padrões

Faça assim

O esmaecido na cor do fundo da caixa.

Parece a folha continuando.

Não faça

Uma sombra borrada embaixo, ou uma seta piscando.

Sombra esfumada não é do Feitio, e seta piscando é barulho.

É só visual (aria-hidden="true").

Atributos

Atributo	Valores	Para quê
`class="feitio-scroll-fade"`	último filho	O esmaecido preso na borda de baixo.
`--feitio-scroll-fade-to`	uma cor do Feitio	A cor do fundo, quando não é `surface`.
`--feitio-scroll-fade-bleed`	um recuo	Passa por cima do recuo de um bloco e vai de borda a borda.