Fade In

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

What this is

A component that makes everything on the page smoothly fade in, instead of appearing instantly when the page loads.

The fade can also be staggered, with each thing on the page appearing one by one instead of all at once.

Usage

On any wiki:

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

speed=1: everything appears at the same time
speed=2: everything appears 0.5s after the last thing
speed=3: everything appears 0.25s after the last thing

Caveats

The fade-in effect will only apply to elements that are direct children of #page-content. It won't apply to nested elements (e.g. stuff inside a blockquote or a div) or other parts of the page (e.g the sidebar).

(You can use this to your advantage if there are other animations on your page that would conflict (e.g ACS Animation) by simply wrapping the problematic animated element in a div.)

It also only applies to the first 15 elements on the page, and everything else after that will appear at the same time. This is enough for a smooth load-in experience when a reader opens the page, but if they want to scroll right to the bottom, they're able to do that without having to wait very long.

---

Source code

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