Fundido de Entrada

NO EDITES ESTO ÒwÓ

Esta es una página plantilla utilizada internamente por la Wiki.

NO TOQUES ESTA PÁGINA
SIN PERMISO DEL STAFF Y/O AUTOR

---

Qué es esto

Un componente que hace que todo en la página aparezca suavemente, en lugar de aparecer al instante cuando la página se carga.

El fundido también puede ser escalonado, con cada cosa en la página apareciendo una por una en lugar de todas a la vez.

Uso

En cualquier wiki:

[[include component:fade-in speed=1]]

speed=1: todo aparece al mismo tiempo
speed=2: todo aparece 0,5s después de lo último
speed=3: todo aparece 0,25s después de lo último

Advertencias

El efecto de desvanecimiento sólo se aplicará a los elementos que sean hijos directos de #page-content. No se aplicará a los elementos anidados (por ejemplo, dentro de un blockquote o un div) o a otras partes de la página (por ejemplo, la barra lateral).

(Puedes usar esto en tu beneficio si hay otras animaciones en tu página que podrían entrar en conflicto (e.g Animación ACS) simplemente envolviendo el elemento animado problemático en un div.)

También se aplica sólo a los primeros 15 elementos de la página, y todo lo demás aparecerá al mismo tiempo. Esto es suficiente para una experiencia de carga suave cuando un lector abre la página, pero si quiere llegar hasta el final, puede hacerlo sin tener que esperar mucho tiempo.

---

Código Fuente

@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;
}