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 be staggered, with each thing on the page appearing one by one instead of all at once.

⚠️ Warning: This component can present a hostile reading experience for some users, especially when staggered. I recommend not using this component, and advising other authors to do the same.

⛔️ Not suitable for: Any page where the reader might not start at the top of the page, e.g. hubs or any page with a table of contents.

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.2s after the last thing (not recommended)
speed=3: everything appears 0.1s after the last thing (not recommended)

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.)

To alleviate the negative impact on readers, the fade in animation only applies to the first 15 elements on the page, and everything else after that will appear at the same time.

Removing from other themes

Some CSS themes bundle Fade In by default (BLANKSTYLE CSS, Flopstyle: LITE, Foxtrot Theme and Queerstyle CSS at the time of writing). If you'd like to use those themes without Fade In, you can disable it with the following:

[[module CSS]]
:root {
--fade-in: none;
}
[[/module]]

---

Source code

:where(:root) {
  --fade-in: fadeIn;
  --fade-in-delay: 0s;
}
 
/* Disable for hub pages, due to the reader being likely to want to start reading elsewhere than the top of the page */
:root:has(#page-tags a[href*=hub]),
/* Disable for pages with a table of contents, as the user is likely to jump directly to where they want to start reading */
:root:has(#toc) {
  --fade-in: none !important;
}
 
@media (prefers-reduced-motion: no-preference) {
  :where(#page-title, #breadcrumbs, #page-content > *) {
    animation-name: var(--fade-in);
    animation-duration: 0.8s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
  }
}
 
:where(#page-title) { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:where(#page-content > :nth-child(1)) { animation-delay: calc(1 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(2)) { animation-delay: calc(2 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(3)) { animation-delay: calc(3 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(4)) { animation-delay: calc(4 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(5)) { animation-delay: calc(5 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(6)) { animation-delay: calc(6 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(7)) { animation-delay: calc(7 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(8)) { animation-delay: calc(8 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(9)) { animation-delay: calc(9 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(10)) { animation-delay: calc(10 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(11)) { animation-delay: calc(11 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(12)) { animation-delay: calc(12 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(13)) { animation-delay: calc(13 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(14)) { animation-delay: calc(14 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(15)) { animation-delay: calc(15 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(n+15)) { animation-delay: calc(16 * var(--fade-in-delay)); }

:where(:root) {
   --fade-in-delay: 0.2s;
}

:where(:root) {
  --fade-in-delay: 0.1s;
}