ScrollFade

Der untere Rand eines scrollbaren Rahmens fadet in das Papier ein, wie ein Blatt, das weitergeht. Es signalisiert mehr Inhalt; am Ende verschwindet es.

Auf dieser Seite

Playground

Erinnerung 1: jede Woche, 8h.

Erinnerung 2: jede Woche, 9h.

Erinnerung 3: jede Woche, 10h.

Erinnerung 4: jede Woche, 11h.

Erinnerung 5: jede Woche, 12h.

Erinnerung 6: jede Woche, 13h.

Erinnerung 7: jede Woche, 14h.

Erinnerung 8: jede Woche, 15h.

Erinnerung 9: jede Woche, 16h.

Erinnerung 10: jede Woche, 17h.

Inhalt

Hintergrund

HTML

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

Wann verwenden

Am Ende jedes Bereichs, der scrollen und Inhalte verbergen kann: der Bildschirm, der Körper eines Drawers, eine feste Liste.

Wann nicht verwenden

In einem Rahmen, der nie scrollt.
Über einer Aktion am Ende des Rahmens: die Aktion geht in einen Footer außerhalb des Scrollens.

Beispiele

Erinnerung 1: jede Woche, 8h.

Erinnerung 2: jede Woche, 9h.

Erinnerung 3: jede Woche, 10h.

Erinnerung 4: jede Woche, 11h.

Erinnerung 5: jede Woche, 12h.

Erinnerung 6: jede Woche, 13h.

Erinnerung 7: jede Woche, 14h.

Erinnerung 8: jede Woche, 15h.

Erinnerung 9: jede Woche, 16h.

Erinnerung 10: jede Woche, 17h.

Erinnerung 11: jede Woche, 18h.

Erinnerung 12: jede Woche, 19h.

Erminnerung 13: jede Woche, 20h.

Erminnerung 14: jede Woche, 21h.

In einer scrollbaren Box

Scrollen innerhalb des Rahmens. Der scrollbare Rahmen hat keine Padding; das Padding gehört zum Inhalt darin.

Code anzeigen

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>

Do and don't

Das Faden im Hintergrundfarb des Rahmens.

Es sieht aus wie das Blatt, das weitergeht.

Don’t

Ein verschwommener Schatten unten oder ein blinkender Pfeil.

Verschwommene Schatten sind nicht Feitio, und ein blinkender Pfeil ist Rauschen.

Es ist visuell nur (aria-hidden="true").

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-scroll-fade"`	letztes Kind	Der Fade, der an den unteren Rand fixiert ist.
`--feitio-scroll-fade-to`	eine Feitio-Farbe	Hintergrundfarbe, wenn es nicht `surface` ist.
`--feitio-scroll-fade-bleed`	ein Padding	Liegt über das Padding eines Blocks, von Kante zu Kante.