Efeito Fade In

AVISO:

Esta é uma página component usada internamente pela Wiki Lusófona. Ela foi feita para ser usada e incluída em outras páginas.

O que é isso?

Um componente que faz com que tudo da página apareça suavemente, em vez de aparecer instantaneamente depois da página carregar.

O fade pode também ser cambaleado, com cada coisa aparecendo por vez em vez de aparecer tudo depois do efeito.

Uso

Em qualquer wiki:

[[include :scp-pt-br:component:fade-in speed=1]]

speed=1: Tudo aparece ao mesmo tempo
speed=2: Tudo aparece 0.5 segundos depois da coisa anterior
speed=3: Tudo aparece 0.25 segundos depois da coisa anterior

Ressalvas

O efeito de fade-in só se aplica a elementos que são filhos diretos de #page-content. Não se aplica a elementos aninhados (por exemplo, coisas dentro de um blockquote ou div) ou outras partes da página (por exemplo, a barra lateral).

(Você pode usar isso a seu favor se houver outras animações em sua página que entrem em conflito (por exemplo, Animação ACS) simplesmente envolvendo o elemento animado problemático em um div.)

Também se aplica apenas aos primeiros 15 elementos da página, e tudo o mais depois disso aparecerá ao mesmo tempo. Isso é o suficiente para uma experiência de carregamento suave quando um leitor abre a página, mas se ele quiser rolar até o final, pode fazer isso sem ter que esperar muito.

---

Código Fonte

@media screen and (prefers-reduced-motion: no-preference) {
  #page-title, #breadcrumbs, #page-content > * {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
  }
}
 
#page-title { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:root {
  --fade-in-delay: 0s;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }

:root {
   --fade-in-delay: 0.5s;
}

:root {
  --fade-in-delay: 0.25s;
}