ScrollFade

Le bord inférieur d'une boîte à défilement s'estompe dans le papier, comme une feuille qui continue. Il signale plus de contenu ; à la fin, il disparaît.

Sur cette page

Playground

Rappel 1: chaque semaine, 8h.

Rappel 2: chaque semaine, 9h.

Rappel 3: chaque semaine, 10h.

Rappel 4: chaque semaine, 11h.

Rappel 5: chaque semaine, 12h.

Rappel 6: chaque semaine, 13h.

Rappel 7: chaque semaine, 14h.

Rappel 8: chaque semaine, 15h.

Rappel 9: chaque semaine, 16h.

Rappel 10: chaque semaine, 17h.

Contenu

Fond

HTML

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

Quand l'utiliser

À la fin de toute zone capable de défilement et pouvant cacher du contenu : l'écran, le corps d'un Drawer, une liste de hauteur fixe.

Quand ne pas l'utiliser

Dans une boîte qui ne défile jamais.
Sur un action à la fin de la boîte : l'action va dans un footer en dehors du défilement.

Exemples

Rappel 1 : toutes les semaines, 8h.

Rappel 2 : toutes les semaines, 9h.

Rappel 3 : toutes les semaines, 10h.

Rappel 4 : toutes les semaines, 11h.

Rappel 5 : toutes les semaines, 12h.

Rappel 6 : toutes les semaines, 13h.

Rappel 7 : toutes les semaines, 14h.

Rappel 8 : toutes les semaines, 15h.

Rappel 9 : toutes les semaines, 16h.

Rappel 10 : toutes les semaines, 17h.

Rappel 11 : toutes les semaines, 18h.

Rappel 12 : toutes les semaines, 19h.

Rappel 13 : tous les semaines, 20h.

Rappel 14 : tous les semaines, 21h.

Dans une boîte défilante

Défilez à l'intérieur de la boîte. La boîte à défilement n'a pas de marge ; la marge est sur le contenu qui se trouve à l'intérieur.

Afficher le code

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>

Faire et ne pas faire

L'estompe dans la couleur de fond de la boîte.

Cela ressemble à la feuille qui continue.

Don’t

Une ombre floue en bas, ou une flèche clignotante.

Les ombres flues ne sont pas Feitio, et une flèche clignotante est du bruit.

C'est uniquement visuel (aria-hidden="true").

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-scroll-fade"`	dernier enfant	L'effet de fondu fixé au bord inférieur.
`--feitio-scroll-fade-to`	une couleur Feitio	La couleur de fond, lorsqu'elle n'est pas `surface`.
`--feitio-scroll-fade-bleed`	un espacement	Cela s'étend sur l'espacement d'un bloc, bord à bord.